1. 程式人生 > 程式設計 >在Uni中使用Vue的EventBus匯流排機制操作

在Uni中使用Vue的EventBus匯流排機制操作

首先我們要使用的EventBus事件匯流排,能夠做到兄弟元件,或者不是父子關係的頁面達到資料相互傳遞的效果

一種做法是在main.js中建立事件匯流排

在Uni中使用Vue的EventBus匯流排機制操作

建立完$EventBus後,就可以直接在頁面中使用事件匯流排的方法來發送和接收事件了

第二種做法:封裝事件匯流排

在Uni中使用Vue的EventBus匯流排機制操作

在Uni中使用Vue的EventBus匯流排機制操作

使用的時候直接引入就可以了

在Uni中使用Vue的EventBus匯流排機制操作

補充知識:vue裡使用EventBus解決兄弟元件間的傳遞資訊

①初始化

import Vue from 'vue'

export const EventBus = new Vue();

②在需要的呼叫其他元件的頁面:

EventBus.$emit ( '自定義函式',傳參 );

③被呼叫的頁面:

EventBus.$on ( '自定義函式',(接收引數) => {   
 執行你需要執行方法
}

④總結

EventBus的使用場景像是一種廣播,當我們向EventBus傳送一個事件,則該事件將會傳遞給多個該事件的訂閱者。

1.解耦合(輕鬆的實現系統間解耦)

2.高效能可擴充套件(每一個事件都是簡單獨立且不可更改的物件,只需要儲存新增的事件,不涉及其他的變更刪除操作)

3.系統審計(每一個事件都是不可變更的,每一個事件都是可追溯的)

以上這篇在Uni中使用Vue的EventBus匯流排機制操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。