Vue笔记2 父子组件的数据通信

使用vue封装的组件，在调用时要与父组件进行数据通信，主要有两种方式：

1.使用props，将父组件的数据传递给子组件

//子组件,设置parentMsg接收子组件的数据
Vue.component('my-child',{
    props:['parentMsg'],
});

//父组件,绑定parentMsg属性
<parent id="app">
    <my-child :parent-msg="msg"></my-child>
</parent>
new Vue({
    el:'#app',
    data:{
        msg:'data to child',
    }
})

2.子组件可以注册事件，并主动触发，父组件对子组件监听，触发时进行数据操作

//子组件
Vue.component("my-child",{
    template:`<div>
        <a href="#" @click="toPare"></a>
        </div>`,
    methods:{
        toPare:function(){
            //触发toPare事件，data是传递的参数
            this.$emit('toPare',data);
        }
    }
});

//父组件，绑定事件
<parent id="app">
    <my-child @toPare="childEvent"></my-child>
</parent>
new Vue({
    el:'#app',
    methods:{
        childEvent:function(data){
            console.log(data);
        },
    }
})