VUE：组件与组件之间的通信

一，父组件向子组件传值：props

首先，准备一个父组件：father,和一个子组件：child.

现在需要把父组件的msg，传给子组件。

1.在子组件中，定义一个props,存放一个属性‘msg’.

child:{
        template:'#tplChild',
        props:['msg'],
    }

2.在父组件模板的子组件中添加该props属性，属性值是父组件的msg

3.现在可以在子组件中使用数据msg，像普通data数据那样使用。

二，子组件向父组件传值：$emit

同样准备上面两个组件，父组件：father,子组件：child.

子组件向父组件传递数据，需要用到自定义事件，这里用click事件举例，也可以用别的事件。

1.在子组件中，定义一个按钮，准备点击事件，并绑定一个事件函数。

2.在子组件的methods中，定义点击事件的函数。

//子组件
child:{
    template:'#tplChild',
    data(){
        return {
            sonMsg:'子组件的msg'
        }
    },
    methods:{
        // 点击按钮事件
        sendMsg(){
            // 第一个参数：自定义事件名，第二个参数：传送的数据
            this.$emit('getmsg',this.sonMsg);
        }
    }
}

3.在父组件模板的子组件标签中，设置自定义事件。(注意自定义事件的事件名不要用驼峰式命名，可以用全小写，或者‘-’连接单词)

4.父组件通过自定义函数getval接收数据。

//父组件
father:{
    template:'#tplFather',
    data(){
        return {
            sonMsg:''
        }
    },
    methods:{
        // 参数data就是子组件传过来的数据
        getval(data){
            this.sonMsg = data;
        }
    },
}

5.可以在父组件中正常使用接收的数据了。

以上是两种组件间的通信方式。