詳解利用eventemitter2實現Vue組件通信
概述
當兩個組件之間沒有任何父子關系時，利用Vue標準的props傳值和emit觸發(fā)事件無法解決他們之間通信的問題。最近做的項目使用的是eventemitter2，來實現不相關組件之間的通信。這篇文章分享的是我對eventemitter2使用的總結和體會。
eventemitter2的npm文檔大家可以看eventemitter2介紹。它是node.js提供的事件接口。安裝如下
npm install --save eventemitter2
模塊的EventEmitter2屬性是一個構造函數，可以生成eventemitter2實例。實例定義了綁定、觸發(fā)、移除事件的方法。本文涉及到的實例方法有on，off，emit，removeAllListeners，更多方法，大家可以去npm文檔自行學習。
和其他事件處理機制一樣，eventemitter2事件處理，必須包含三部分：
綁定事件 =》 觸發(fā)事件 =》 移除事件
本次分享，主要討論在vue項目中使用eventemitter2：
- 方法一：結合class模塊化編程，對實例、事件名、綁定事件方法和移除事件方法做封裝
- 方法二：結合vue插件開發(fā)，全局添加事件實例
方法一：結合class
開發(fā)步驟：
- 添加模塊 event_confg.js，用于存儲eventEmitter2實例和事件名
- 添加模塊 event_manager.js，封裝實例綁定事件的方法和移除事件的方法
- 按照 綁定事件 =》 觸發(fā)事件 =》 移除事件的步驟，使用eventeitter2
第一步：創(chuàng)建 event_confg.js
var EventEmitter2 = require('eventemitter2').EventEmitter2;
// emiter中定義的是eventemitter2實例，config中定義的是事件名
const eventConfig = {}
eventConfig.emitter = new EventEmitter2()
eventConfig.config = {
"CHECK_CHANGES": "checkChanges"
// 更多的事件名，往這里添加
}
export default eventConfig
第二步： 創(chuàng)建event_manager.js
此模塊創(chuàng)建的是一個類，傳入eventemitter2實例后，對實例的添加和移除事件的方法做了封裝。
這里綁定和移除事件，分別用了on，off方法。
export default class {
constructor(evtInst){
this.evtInst = evtInst
this.listeners = {} // {eventName: [callback1,callback2...]}
}
// 將事件名evtName的回調綁定為callback，同時將事件名和回調存到listeners，方便后面移除事件使用
addListener(evtName, callback){
this.evtInst.on(evtName, callback)
if(!this.listeners[evtName]){
this.listeners[evtName] = [callback]
}else{
this.listeners[evtName].push(callback)
}
}
removeListeners(){
Object.keys(this.listeners).forEach(evtName => {
this.listeners[evtName].forEach((callback, index) => {
this.evtInst.off(evtName,callback)
})
})
}
}
第三步： 在組件中使用eventemitter2
綁定事件
同一個事件名，可以綁定多個事件回調，當事件被觸發(fā)時，會順序執(zhí)行同名的回調函數
import EventManager from "@/utils/event_manager.js"
import eventConfig from "@/utils/event_config.js"
...
// 初始化event_manager實例
this.evtManagerInst = new EventManager(eventConfig.emitter)
// 用實例的addListener方法綁定事件
this.evtManagerInst.addListener(eventConfig.config.CHECK_CHANGES, obj => {
this.value = Object.is(NaN,parseInt(obj.value))
})
this.evtManagerInst.addListener(eventConfig.config.CHECK_CHANGES, obj => {
console.log("第二個事件也觸發(fā)了！",obj)
})
觸發(fā)事件
事件的觸發(fā)和回調是同步執(zhí)行的。用下面的方式觸發(fā)事件后，執(zhí)行的過程是：
打印 準備觸發(fā)啦！ =》 執(zhí)行回調 =》 執(zhí)行 $message彈框
import eventConfig from "@/utils/event_config.js"
...
// 傳給事件回調函數的參數
let obj = {value: val, type: "", msg: ""}
// 觸發(fā)事件
console.log("準備觸發(fā)啦！")
eventConfig.emitter.emit(eventConfig.config.CHECK_CHANGES, obj)
// 事件觸發(fā)后的處理
this.$message({type: obj.type, message: obj.msg})
移除事件
在beforeRouteLeave或者beforeDestory中移除事件
如果使用的是beforeRouteLeave注意調用它的next函數，讓路由繼續(xù)往下執(zhí)行
beforeDestroy(){
this.evtManagerInst.removeListeners()
}
方法二：結合Vue插件開發(fā)
思路是，向頂層Vue對象添加全局的eventemitter2對象作為屬性。
開發(fā)步驟：
- 使用install創(chuàng)建emitter.js插件，在其中給Vue添加全局屬性
- 使用全局的Vue.use()方法，使用插件
- 按照 綁定事件 =》 觸發(fā)事件 =》 移除事件的步驟，使用eventeitter2
第一步：創(chuàng)建全局變量
添加全局屬性$emit_inst，存儲實例；添加全局的$emit_name，存儲事件名
var EventEmitter2 = require('eventemitter2').EventEmitter2;
// 事件名，實例
const emitter = {}
// 創(chuàng)建實例，定義事件名
emitter.install = function(Vue){
Vue.prototype.$emit_inst = new EventEmitter2()
Vue.prototype.$emit_name = {
"CHECK_TYPE_TWO": "checkTypeTwo",
"ANOTHER_EVENT": "anotherEvt"
// 繼續(xù)往后添加實例名
}
}
export default emitter
第二步：使用插件
在main.js中，new Vue()命令創(chuàng)建實例之前，調用Vue.use()方法，使用插件
import emitter from "./emitter" Vue.use(emitter)
第三步：在組件中使用eventemitter2
綁定事件
這里使用的是，官方文檔的on方法，傳入eventName和回調，給實例綁事件，并定義回調函數。
同一個事件名，可以綁定多個事件回調，當事件被觸發(fā)時，會順序執(zhí)行同名的回調函數
this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj => {
this.value1 = Object.is(NaN,parseInt(obj.value))
obj.type = this.value1 ? "success" : "warning"
obj.msg = this.value1 ? "字符" : "數字"
console.log("CHECK_TYPE_TWO第一次觸發(fā)")
})
this.$emit_inst.on(this.$emit_name.CHECK_TYPE_TWO, obj => {
console.log("CHECK_TYPE_TWO第二次觸發(fā)")
})
觸發(fā)事件
事件的觸發(fā)和回調是同步執(zhí)行的。執(zhí)行過程，上面有說明。
this.$emit_inst.emit(this.$emit_name.CHECK_TYPE_TWO, obj)
移除事件
直接在實例上移除事件時，使用removeAllListeners方便，因為只用傳事件名。
beforeDestroy(){
this.$emit_inst.removeAllListeners(this.$emit_name.CHECK_TYPE_TWO)
}
總結：
使用eventemitter2，就是正確創(chuàng)建實例，給實例綁定、觸發(fā)和移除事件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
作為使用Vue已經很多年的人，特別是去年一直在使用?Vue3，因此，學到了很多東西。所以本文為大家準備了7個讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
vue2.0 + element UI 中 el-table 數據導出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數據導出Excel的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了基于vue-seamless-scroll實現無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了詳解Vue中使用v-for語句拋出錯誤的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue3項目中代碼出現紅色波浪線的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-cli中實現響應式布局的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個字段的表單,使用resetFields方法進行重置,發(fā)現點擊重置或要清空校驗時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下2023-12-12
vue3使用vuex實現頁面實時更新數據實例教程(setup)
在前端開發(fā)中往往會遇到頁面需要實時刷新數據的情況,給用戶最新的數據展示,這篇文章主要給大家介紹了關于vue3使用vuex實現頁面實時更新數據(setup)的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了關于Vue源碼vm.$watch()內部原理詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue源碼學習之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學習之Object.defineProperty對象屬性監(jiān)聽，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05