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';
});
}