【Vue】---- 手動封裝on，emit，off

1、概念

1. $on("事件名稱"，回調函數)

    事件綁定，一個事件名稱上面可能綁定多個函數

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

    事件觸發時，會觸發當前事件身上全部的函數

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

    事件解綁時，若指定解綁函數則只解綁相應函數，不然解綁所有

 

2、手動封裝on，emit，off事件在vue中的做用

|  在vue中進行非父子組件傳值時，咱們能夠經過在vue的原型上添加一個公共的vue實例，組件之間調用這個公共實例的$on/$emit來傳遞數據，傳遞的一方調用$emit，接收的一方調用$on。

Vue.prototype.Observer = new Vue(); //實例化對象

|  這種方式能使全部對象擁有共同的on和emit，可是增長的屬性所掛載的實例對象太大，就至關於你的一臺法拉利的輪子壞了，你又買了一臺新的法拉利並卸掉它的輪子，放到了原來的法拉利上，這十分耗費性能。所以，咱們能夠手動封裝事件，來實現非父子傳值。

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

 

3、封裝on，emit，off事件

  1. $on：建立一個事件倉庫存放事件，判斷事件名稱是否存在。若不存在，初始化建立一個數組；若存在，將當前函數push到數組中。

const EventList = {}; //一個事件名稱上面可能綁定多個函數，所以是一對多的模式，即觀察者模式，數據類型採用對象  const on = function(eventName,callback){ if(!EventList[eventName]){ EventList[eventName] = []; } EventList[eventName].push(callback); }

  2. $emit：判斷事件名稱是否存在。若不存在，直接返回return；若存在，對當前事件名稱所對應的全部函數進行遍歷，並將參數傳遞過去。

const emit = function(eventName,params){ if(!EventList[eventName])return; EventList[eventName].map((cb)=>{ cb(params) }) }

  3. $off：判斷事件名稱是否存在。若不存在，直接返回return；若存在，判斷callback是否存在，若是存在則刪除對應下標的的函數，若是不存在則將當前數組清空。

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. 導出：便於在其餘文件中調用。

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

 

原文出處：https://www.cnblogs.com/pinkpinkc/p/10941703.html