EventBus的简介
EventBus是什么呢?EevenBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,如果应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。
如何使用EvenBus
首先需要初始化
首先需要创建事件总线并将其导出,新创建一个 .js 文件,比如 event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
发送事件
假设有两个Vue页面需要通信: A 和 B ,A页面 在按钮上面绑定了点击事件,发送一则消息,想通知 B页面
<!-- A.vue -->
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '来自A页面的消息');
}
}
};
</script>
然后接受事件在B页面
<!-- IncrementCount.vue -->
<template>
<p>{{msg}}</p>
</template>
<script>
import {
EventBus
} from "../event-bus.js";
export default {
data(){
return {
msg: ''
}
},
mounted() {
EventBus.$on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});
}
};
</script>
b也可以向a发送消息
// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))
如果使用不善,EventBus会是一种灾难。通常会用到,在vue页面销毁时,同时移除EventBus事件监听。
移出事件监听者
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
//使用
EventBus.$off('aMsg')
//来移除应用内所有对此某个事件的监听。或者直接调用
EventBus.$off()
//来移除所有事件频道,不需要添加任何参数 。