一、概念

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

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

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

事件觸發時，會觸發當前事件身上所有的函數

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

事件解綁時，若指定解綁函數則只解綁相應函數，否則解綁全部

二、手動封裝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的原型上

三、封裝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}

總結

以上所述是小編給大家介紹的通過vue手動封裝on、emit、off的代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！