前言
vue通信手段有很多種，props/emit籍琳、vuex 菲宴、provide/inject 贷祈、attrs、listeners 等喝峦。還有一種通信方式势誊，event bus 兩個(gè)不相關(guān)的組件之間的通信方式，一般用于兄弟組件之間的通訊方式谣蠢。Vuex也能實(shí)現(xiàn)兄弟組件之間的傳值粟耻，定義一個(gè)公共變量也是可以的，但是相對來說比較好的實(shí)現(xiàn)方式就是 eventBus 眉踱。
使用
1.首先我們創(chuàng)建一個(gè) bus.js 文件挤忙，里面的內(nèi)容如下：
// event-bus.js
import Vue from 'vue';
export default new Vue();
或者：可以直接在項(xiàng)目中的 main.js 初始化 EventBus
// main.js
Vue.prototype.$EventBus = new Vue()
2.在需要使用 eventBus 的組件中引入上面創(chuàng)建的 bus.js 文件
import EventBus from "../bus.js";
3.發(fā)布Bus消息的組件
methods: {
getBusToo() {
EventBus.$emit("getTarget", this.sendText);
//或者 main.js 引用時(shí)
this.$EventBus.$emit("getTarget", this.sendText);
},
},
4.接收Bus消息的組件
mounted() {
EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
//或者 main.js 引用時(shí)
this.$EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
},
5.vue頁面銷毀時(shí)，同時(shí)移除EventBus事件監(jiān)聽谈喳。
mounted() {
EventBus.$on("getTarget", (myMsg) => {
this.receive = myMsg;
});
},
//移除EventBus事件監(jiān)聽
destroyed() {
//使用 EventBus.$off('aMsg') 來移除應(yīng)用內(nèi)所有對此某個(gè)事件的監(jiān)聽册烈。
//或者直接調(diào)用 EventBus.$off() 來移除所有事件頻道，不需要添加任何參數(shù)
EventBus.$off("getTarget");
//或者 main.js 引用時(shí)
this.$EventBus.$off("getTarget", this.sendText);
},
另外：也可以將EventBus定義全局EventBus婿禽，如果有興趣可以再試一下赏僧。
參考文章：Vue兄弟組件之間通信 eventBus 大猛、Vue事件總線（EventBus）使用詳細(xì)介紹
代碼地址：碼云 vue-question 組件通訊 - event bus
