69. 使用Event bus实现兄弟组件通讯
1. 创建一个event bus实例
在Vue
项目中,可以在src
目录下新建一个event-bus.js
文件,用来创建一个空的Vue
实例,并导出该实例:
import Vue from 'vue';
export const EventBus = new Vue();
2. 在发送消息的组件中,使用$emit方法触发事件
例如,在组件A
中需要向组件B
发送一个名为"message"
的事件,可以在组件A
的方法中使用$emit
方法触发该事件:
import { EventBus } from '@/event-bus.js';
export default {
name: 'ComponentA',
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello, ComponentB!');
}
}
}
其中,第一个参数是要发送的事件名,第二个参数是要发送的数据。
3. 在接收消息的组件中,使用$on方法监听事件
在组件B
中,需要在created
钩子中使用$on
方法监听事件:
import { EventBus } from '@/event-bus.js';
export default {
name: 'ComponentB',
data() {
return {
message: ''
}
},
created() {
EventBus.$on('message', (data) => {
this.message = data;
});
}
}
其中,第一个参数是要监听的事件名,第二个参数是回调函数,在事件触发时执行,用来处理接收到的数据。
这样,当组件A
中调用sendMessage
方法触发事件后,组件B
就会收到消息,并且更新页面上的数据。
需要注意的是,event bus
是一个全局的实例,因此需要避免在多个组件中使用相同的事件名,以免产生冲突。同时,在组件销毁时,需要使用$off
方法来移除事件监听,避免内存泄漏。