通過(guò)vue手動(dòng)封裝on、emit、off的代碼詳解

更新時(shí)間：2019年05月29日 10:09:11 作者：pinkpinkc

這篇文章主要介紹了通過(guò)vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、概念

1. $on("事件名稱"，回調(diào)函數(shù))

事件綁定，一個(gè)事件名稱上面可能綁定多個(gè)函數(shù)

2. $emit("事件名稱"，需要傳遞的值)

事件觸發(fā)時(shí)，會(huì)觸發(fā)當(dāng)前事件身上所有的函數(shù)

3. $off("事件名稱"，[需要解綁的函數(shù)])

事件解綁時(shí)，若指定解綁函數(shù)則只解綁相應(yīng)函數(shù)，否則解綁全部

二、手動(dòng)封裝on，emit，off事件在vue中的作用

| 在vue中進(jìn)行非父子組件傳值時(shí)，我們可以通過(guò)在vue的原型上添加一個(gè)公共的vue實(shí)例，組件之間調(diào)用這個(gè)公共實(shí)例的$on/$emit來(lái)傳遞數(shù)據(jù)，傳遞的一方調(diào)用$emit，接收的一方調(diào)用$on。

Vue.prototype.Observer = new Vue(); //實(shí)例化對(duì)象

| 這種方式能使所有對(duì)象擁有共同的on和emit，但是增加的屬性所掛載的實(shí)例對(duì)象太大，就相當(dāng)于你的一臺(tái)法拉利的輪子壞了，你又買了一臺(tái)新的法拉利并卸掉它的輪子，放到了原來(lái)的法拉利上，這十分耗費(fèi)性能。因此，我們可以手動(dòng)封裝事件，來(lái)實(shí)現(xiàn)非父子傳值。

import Observer from "./Observer"; //引入封裝好的文件
Vue.prototype.Observer = Observer;  //將其添加到vue的原型上

三、封裝on，emit，off事件

1. $on：創(chuàng)建一個(gè)事件倉(cāng)庫(kù)存放事件，判斷事件名稱是否存在。若不存在，初始化創(chuàng)建一個(gè)數(shù)組；若存在，將當(dāng)前函數(shù)push到數(shù)組中。

const EventList = {}; //一個(gè)事件名稱上面可能綁定多個(gè)函數(shù)，因此是一對(duì)多的模式，即觀察者模式，數(shù)據(jù)類型采用對(duì)象
const on = function(eventName,callback){
  if(!EventList[eventName]){
    EventList[eventName] = [];
  }

  EventList[eventName].push(callback);
}

2. $emit：判斷事件名稱是否存在。若不存在，直接返回return；若存在，對(duì)當(dāng)前事件名稱所對(duì)應(yīng)的所有函數(shù)進(jìn)行遍歷，并將參數(shù)傳遞過(guò)去。

const emit = function(eventName,params){
  if(!EventList[eventName])return;

  EventList[eventName].map((cb)=>{
    cb(params)
  })
}

3. $off：判斷事件名稱是否存在。若不存在，直接返回return；若存在，判斷callback是否存在，如果存在則刪除對(duì)應(yīng)下標(biāo)的的函數(shù)，如果不存在則將當(dāng)前數(shù)組清空。

const off = function(eventName,callback){
  if(!EventList[eventName])return;

  if(callback){
    let index = EventList[eventName].indexOf(callback);
    EventList[eventName].splice(index,1);
  }else{
    EventList[eventName] = [];
  }
}

4. 導(dǎo)出：便于在其他文件中調(diào)用。

export default {
  $on : on,
  $emit : emit,
  $off : off
}

總結(jié)

以上所述是小編給大家介紹的通過(guò)vue手動(dòng)封裝on、emit、off的代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: