通過vue手動封裝on、emit、off的代碼詳解
一、概念
1. $on("事件名稱"，回調(diào)函數(shù))
事件綁定，一個(gè)事件名稱上面可能綁定多個(gè)函數(shù)
2. $emit("事件名稱"，需要傳遞的值)
事件觸發(fā)時(shí)，會觸發(fā)當(dāng)前事件身上所有的函數(shù)
3. $off("事件名稱"，[需要解綁的函數(shù)])
事件解綁時(shí)，若指定解綁函數(shù)則只解綁相應(yīng)函數(shù)，否則解綁全部
二、手動封裝on，emit，off事件在vue中的作用
| 在vue中進(jìn)行非父子組件傳值時(shí)，我們可以通過在vue的原型上添加一個(gè)公共的vue實(shí)例，組件之間調(diào)用這個(gè)公共實(shí)例的$on/$emit來傳遞數(shù)據(jù)，傳遞的一方調(diào)用$emit，接收的一方調(diào)用$on。
Vue.prototype.Observer = new Vue(); //實(shí)例化對象
| 這種方式能使所有對象擁有共同的on和emit，但是增加的屬性所掛載的實(shí)例對象太大，就相當(dāng)于你的一臺法拉利的輪子壞了，你又買了一臺新的法拉利并卸掉它的輪子，放到了原來的法拉利上，這十分耗費(fèi)性能。因此，我們可以手動封裝事件，來實(shí)現(xiàn)非父子傳值。
import Observer from "./Observer"; //引入封裝好的文件 Vue.prototype.Observer = Observer; //將其添加到vue的原型上
三、封裝on，emit，off事件
1. $on：創(chuàng)建一個(gè)事件倉庫存放事件，判斷事件名稱是否存在。若不存在，初始化創(chuàng)建一個(gè)數(shù)組；若存在，將當(dāng)前函數(shù)push到數(shù)組中。
const EventList = {}; //一個(gè)事件名稱上面可能綁定多個(gè)函數(shù)，因此是一對多的模式，即觀察者模式，數(shù)據(jù)類型采用對象
const on = function(eventName,callback){
if(!EventList[eventName]){
EventList[eventName] = [];
}
EventList[eventName].push(callback);
}
2. $emit：判斷事件名稱是否存在。若不存在，直接返回return；若存在，對當(dāng)前事件名稱所對應(yīng)的所有函數(shù)進(jìn)行遍歷，并將參數(shù)傳遞過去。
const emit = function(eventName,params){
if(!EventList[eventName])return;
EventList[eventName].map((cb)=>{
cb(params)
})
}
3. $off：判斷事件名稱是否存在。若不存在，直接返回return；若存在，判斷callback是否存在，如果存在則刪除對應(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é)
以上所述是小編給大家介紹的通過vue手動封裝on、emit、off的代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue2 前后端分離項(xiàng)目ajax跨域session問題解決方法
本篇文章主要介紹了vue2 前后端分離項(xiàng)目ajax跨域session問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue.js父子組件傳參的原理與實(shí)現(xiàn)方法
這篇文章主要介紹了vue.js父子組件傳參的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js父子組件傳參的基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2023-04-04
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下2022-10-10
一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)
這篇文章主要介紹了一起寫一個(gè)即插即用的Vue Loading插件實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時(shí)間，可以直接搭配vue使用2022-11-11
這篇文章主要介紹了vue3.0 加載json的方法（非ajax），幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
關(guān)于Vue?ui?的沒反應(yīng)、報(bào)錯(cuò)問題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒反應(yīng)、報(bào)錯(cuò)問題解決總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在使用token進(jìn)行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02