這篇文章將為大家詳細講解有關如何通過vue手動封裝on、emit、off,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創新互聯建站專注于上高網站建設服務及定制,我們擁有豐富的企業做網站經驗。 熱誠為您提供上高營銷型網站建設,上高網站制作、上高網頁設計、上高網站官網定制、微信小程序開發服務,打造上高網絡公司原創品牌,更為您提供上高網站排名全網營銷落地服務。一、概念
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”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
本文題目:如何通過vue手動封裝on、emit、off-創新互聯
新聞來源:http://vcdvsql.cn/article28/dsopcp.html
成都網站建設公司_創新互聯,為您提供網站設計公司、App開發、服務器托管、響應式網站、小程序開發、微信公眾號
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯