如何通過vue手動封裝on、emit、off
這篇文章將為大家詳細講解有關如何通過vue手動封裝on、emit、off，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站設計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的祥符網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
一、概念
1. $on("事件名稱"，回調(diào)函數(shù))
事件綁定，一個事件名稱上面可能綁定多個函數(shù)
2. $emit("事件名稱"，需要傳遞的值)
事件觸發(fā)時，會觸發(fā)當前事件身上所有的函數(shù)
3. $off("事件名稱"，[需要解綁的函數(shù)])
事件解綁時，若指定解綁函數(shù)則只解綁相應函數(shù)，否則解綁全部
二、手動封裝on，emit，off事件在vue中的作用
| 在vue中進行非父子組件傳值時，我們可以通過在vue的原型上添加一個公共的vue實例，組件之間調(diào)用這個公共實例的$on/$emit來傳遞數(shù)據(jù)，傳遞的一方調(diào)用$emit，接收的一方調(diào)用$on。
Vue.prototype.Observer = new Vue(); //實例化對象
| 這種方式能使所有對象擁有共同的on和emit，但是增加的屬性所掛載的實例對象太大，就相當于你的一臺法拉利的輪子壞了，你又買了一臺新的法拉利并卸掉它的輪子，放到了原來的法拉利上，這十分耗費性能。因此，我們可以手動封裝事件，來實現(xiàn)非父子傳值。
import Observer from "./Observer"; //引入封裝好的文件 Vue.prototype.Observer = Observer; //將其添加到vue的原型上
三、封裝on，emit，off事件
1. $on：創(chuàng)建一個事件倉庫存放事件，判斷事件名稱是否存在。若不存在，初始化創(chuàng)建一個數(shù)組；若存在，將當前函數(shù)push到數(shù)組中。
const EventList = {}; //一個事件名稱上面可能綁定多個函數(shù)，因此是一對多的模式，即觀察者模式，數(shù)據(jù)類型采用對象
const on = function(eventName,callback){
if(!EventList[eventName]){
EventList[eventName] = [];
}
EventList[eventName].push(callback);
}2. $emit：判斷事件名稱是否存在。若不存在，直接返回return；若存在，對當前事件名稱所對應的所有函數(shù)進行遍歷，并將參數(shù)傳遞過去。
const emit = function(eventName,params){
if(!EventList[eventName])return;
EventList[eventName].map((cb)=>{
cb(params)
})
}3. $off：判斷事件名稱是否存在。若不存在，直接返回return；若存在，判斷callback是否存在，如果存在則刪除對應下標的的函數(shù)，如果不存在則將當前數(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. 導出：便于在其他文件中調(diào)用。
export default {
$on : on,
$emit : emit,
$off : off
}關于“如何通過vue手動封裝on、emit、off”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
分享名稱：如何通過vue手動封裝on、emit、off
本文鏈接：http://m.jiaotiyi.com/article/gphpgs.html