Vue 父子组件传值——props(二)

父组件向子组件传值

（一）实现父子组件的前提要进行组件的注册，在父组件中imort引入组件子组件，并components注册，在页面中显示子组件的名称child。
下面是父组件内容

  1：a是静态传值，等于写死的数据，父组件传什么值，子组件显示什么值
  2：e是动态传值，bbb是动态传值的内容

<template>

<child a="zhe" :e="bbb"></child>

</template>
<script>

import child from '@components/Child'
export default {
    data(){
        return {
            bbb:{
                name:'123',
                object:null
            }
        }
    },
    components:{
        child
    }
}

</script>
<style>

</style>

下面是子组件内容
props传值

<template>

<div>
    {{a}}<br> {{e}}
</div>

</template>
<script>

export default {
    props:["a","e"],
    data(){
        return{
        }
    }
}

</script>

显示内容如上所示
（二）接着上面的

    现在我们提取父子组件props，动态传值的内容
    

下面是父组件，唯一不同的就是，在动态传值的时候，在html中bbb的后面加了一个点.name，页面变化（只取到了bbb.name的123）；
在父组件的.name写法，也可以在子组件中.name，但前提是父组件动态传值的bbb，不能和子组件的e同时.name。（---自己敲一遍就知道了）

父组件
<template>

<child a="zhe" :e="bbb.name"></child>

</template>