Vue知识点总结(11)——组件通信-父传子（超级详细）

前两期我们简单了解了一下Vue中局部组件和全局组件的创建和使用。
组件创建之后，很重要的一个环节就是通信，一个项目中肯定是有非常多的组件的，它们肯定要能够互相联系，共同收集数据、处理数据、传递数据。
这期我们说一下组件通信中的父传子。

父传子的意思就是父组件向子组件传值。

html"><div id="app">
    <App></App>
</div>

html" title=javascript>javascript"><script>
    Vue.component('Child',{
        template:`
            <div>
                <h2>我是子组件</h2>    
                <p>{{childData}}</p>
            </div>
        `,
        props: ['childData']
    })

    const App = {
        data () {
            return {
                msg:'我是父组件传进来的值'
            }
        },
        template:`
            <Child :childData = 'msg' ></Child>
        `,
        methods: {
            
        }
    }
    new Vue({
        el:'#app',
        components: {
            App
        }
    });
</script>

首先我们先分别声明了一个局部组件App和一个全局组件Child。
我们在局部组件中使用这个全局组件，所以这里产生了一个父子组件的关系，被使用的是儿子，使用的是父亲。

父传子的核心就是利用props来进行传值。

主要步骤：

在父组件绑定自定义的属性
在子组件中声明props接收在父组件挂载的属性
在子组件的template中任意使用

就像我示例中的一样，我们在App组件的template中使用了全局组件Child，并且给它绑定了一个属性childData为data中的msg。
然后在Child组件写了一个属性props里面以数组的形式，存放我们在App组件中挂载的属性名，示例中是childData。
然后我们就可以在这个Child子组件中的任意位置使用这个传进来的值。
在这里插入图片描述
没有问题，我们成功的在子组件中使用了父组件传进来的值，完成了组件通信的父传子。