Vue组件间通信

Posted 2021-06-04 Jmytea

Vue组件间通信

1.父子组件通信？

• 父组件通过：传入props，子组件接收；子组件通过props传来的函数，对父组件进行传值。
• 发布订阅模式

 ``//v-on缩写 @,在组件标签上写v-on:eventName，
 //相当于对组件对象执行$on(eventName)；
 //子组件可以通过this.$emit(eventName,value)触发``

2.非父子组件传值？

• 发布订阅模式:

 ``//v-on缩写@,在组件标签上写v-on:eventName，
 //相当于对组件对象执行$on(eventName)；
 //子组件可以通过this.$emit(eventName,value)触发``

• eventBus:

Vue.prototype.$eventBus = new Vue();   // 发送信息组件
this.$eventBus.$on('add', this.addCallback); // 接收信息组件
this.$eventBus.$emit('add', this.value);