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

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

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

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

<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子组件中的任意位置使用这个传进来的值。

没有问题，我们成功的在子组件中使用了父组件传进来的值，完成了组件通信的父传子。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！