bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

如何通過vue手動封裝on、emit、off-創新互聯

這篇文章將為大家詳細講解有關如何通過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。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

網站建設網站維護公司