這篇文章給大家分享的是有關(guān)如何利用eventemitter2實現(xiàn)Vue組件通信的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

目前創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、渠縣網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

概述

當兩個組件之間沒有任何父子關(guān)系時，利用Vue標準的props傳值和emit觸發(fā)事件無法解決他們之間通信的問題。最近做的項目使用的是eventemitter2，來實現(xiàn)不相關(guān)組件之間的通信。這篇文章分享的是我對eventemitter2使用的總結(jié)和體會。

eventemitter2的npm文檔大家可以看eventemitter2介紹。它是node.js提供的事件接口。安裝如下

npm install --save eventemitter2

模塊的EventEmitter2屬性是一個構(gòu)造函數(shù)，可以生成eventemitter2實例。實例定義了綁定、觸發(fā)、移除事件的方法。本文涉及到的實例方法有on，off，emit，removeAllListeners，更多方法，大家可以去npm文檔自行學習。

和其他事件處理機制一樣，eventemitter2事件處理，必須包含三部分：
綁定事件 =》 觸發(fā)事件 =》 移除事件

本次分享，主要討論在vue項目中使用eventemitter2：

• 方法一：結(jié)合class模塊化編程，對實例、事件名、綁定事件方法和移除事件方法做封裝

• 方法二：結(jié)合vue插件開發(fā)，全局添加事件實例

方法一：結(jié)合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的回調(diào)綁定為callback，同時將事件名和回調(diào)存到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

綁定事件

同一個事件名，可以綁定多個事件回調(diào)，當事件被觸發(fā)時，會順序執(zhí)行同名的回調(diào)函數(shù)

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ā)和回調(diào)是同步執(zhí)行的。用下面的方式觸發(fā)事件后，執(zhí)行的過程是：

打印 準備觸發(fā)啦！ =》 執(zhí)行回調(diào) =》 執(zhí)行 $message彈框

import eventConfig from "@/utils/event_config.js"
...
// 傳給事件回調(diào)函數(shù)的參數(shù)
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注意調(diào)用它的next函數(shù)，讓路由繼續(xù)往下執(zhí)行

beforeDestroy(){
  this.evtManagerInst.removeListeners()
}

方法二：結(jié)合Vue插件開發(fā)

思路是，向頂層Vue對象添加全局的eventemitter2對象作為屬性。

開發(fā)步驟：

1. 使用install創(chuàng)建emitter.js插件，在其中給Vue添加全局屬性

2. 使用全局的Vue.use()方法，使用插件

3. 按照 綁定事件 =》 觸發(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)建實例之前，調(diào)用Vue.use()方法，使用插件

import emitter from "./emitter"
Vue.use(emitter)

第三步：在組件中使用eventemitter2

綁定事件

這里使用的是，官方文檔的on方法，傳入eventName和回調(diào)，給實例綁事件，并定義回調(diào)函數(shù)。
同一個事件名，可以綁定多個事件回調(diào)，當事件被觸發(fā)時，會順序執(zhí)行同名的回調(diào)函數(shù)

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 ? "字符" : "數(shù)字"
  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ā)和回調(diào)是同步執(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)
}

總結(jié)：

使用eventemitter2，就是正確創(chuàng)建實例，給實例綁定、觸發(fā)和移除事件。

感謝各位的閱讀！關(guān)于“如何利用eventemitter2實現(xiàn)Vue組件通信”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前文章：如何利用eventemitter2實現(xiàn)Vue組件通信-創(chuàng)新互聯(lián)
本文鏈接：http://jinyejixie.com/article22/csddcc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、Google、外貿(mào)建站、網(wǎng)站制作、關(guān)鍵詞優(yōu)化、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)