vue父子组件通信

1.父组件传递数据给子组件

父组件数据如何传递给子组件呢？可以通过props属性来实现

父组件：

//这里必须要用 - 代替驼峰data(){return{

msg: [1,2,3]

};

}

子组件通过props来接收数据:

方式1：props: [

'childMsg']

方式2 :props: {    childMsg: Array

//这样可以指定传入的类型，如果类型不对，会警告}

方式3：props: {    childMsg: {        type: Array,

default: [0,0,0]//这样可以指定默认的值}

}

2.子组件与父组件通信

子组件:

methods: {

testClick() {this.$emit('test','123');//主动触发test方法，'123'为向父组件传递的数据}

}

父组件:

      //监听子组件触发的test事件,然后调用change方法methods: {

change(msg) {this.msg =msg;  // msg: 123

}

}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.

let Hub=newVue();//创建事件中心

组件1触发：

methods: {

eve() {

Hub.$emit('change','hehe');//Hub触发事件}}

组件2接收:

created() {

Hub.$on('change', () => {//Hub接收事件this.msg = 'hehe';

});

}