原文:vue使用bus總線,實現非父子組件間的通信

vue組件通信方式有好多,可以使用props傳值,但是props只能父子組件使用。也可以使用vuex,但是vuex比較重,而且非全局的通信最好不要使用vuex 在簡單的場景下,可以使用一個空的Vue實例作為中央事件總線。 這里有兩種方式可以使用 第一種是新建一個bus.js文件,初始化一個空的Vue實例,作為中央總線,然后再組件引用時調用這個bus.js文件 第二種是全局定義,將bus掛載到vu ...

2020-06-12 16:48 0 1130 推薦指數:

查看詳情

vue筆記 - 組件通信 之 中央事件總線bus

中央事件總線 - 就是一個名字可以叫做busvue空實例,里邊沒有任何內容; 人如其名,她就像一個公交車一樣,來回輸送人,將a站點的A輸送到b站點,再將b站點的B輸送到a站點; 這里a,b站點就像父、子組件,也像兄、弟組件,或者像兩個沒有任何親戚關系的任何組件; 而A,B就像 ...

Mon May 14 07:32:00 CST 2018 0 1600
使用Bus.js進行兄弟(父子)組件通信

首先需要在任意地方添加一個bus.js; 在bus.js里面 寫入下面信息 import Vue from 'vue' export default new Vue;    在需要通信組件都引入Bus.js 如果你的bus.js是自定義一個bus的文件 ...

Fri Aug 31 23:11:00 CST 2018 0 2183
vue 2 使用Bus.js進行兄弟(父子)組件通信 簡單案例

vue2中廢棄了$dispatch和$broadcast廣播和分發事件的方法。父子組件中可以用props和$emit()。如何實現父子組件通信,可以通過實例一個vue實例Bus作為媒介,要相互通信的兄弟組件之中,都引入Bus,之后通過分別調用Bus事件觸發和監聽來實現組件之間的通信 ...

Sun Sep 24 20:02:00 CST 2017 12 22653
vue組件通信之$bus(事件總線

$bus 思路是在全局掛載一個實例,通過這個實例里的事件派發和事件監聽實現組件通信,設計模式叫做觀察者模式。 使用場景:跨多層級組件傳參,不順路要坐bus。 第一步 創建一個$bus對象 (main.js) 第二步 實例化Bus並掛載到vue全局上 (main.js ...

Thu Jul 02 05:02:00 CST 2020 0 1231
Vue 父子組件通信

  組件Vue核心的一塊內容,組件之間的通信也是很基本的開發需求。組件通信又包括父組件向子組件傳數據,子組件向父組件傳數據,父子組件通信。前兩種通信Vue的文檔都說的很清楚,但是第三種文檔上確只有下面的幾句 具體如何去實現卻沒有很詳細的說明,於是自己試着進行了實現。先看下簡單的通信 ...

Mon Jun 12 22:14:00 CST 2017 4 925
vue組件通信父子組件通信

什么順序不順序的。。 先來說說父子組件通信。 首先,我們先來了解下vue中的 1.$emit 觸發當前實例上的事件,附加參數都會傳給監聽器回調。 2.$on 監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。 基礎知識准備好 ...

Fri Jul 06 00:14:00 CST 2018 0 1765
vue中非父子組件的傳值bus使用

父子之間的組件傳值,可以使用vuex。簡單的狀態管理,也可以用vue bus vue bus可以實現不同組件、不同頁面通信,比如我在A頁面出發點擊事件,要B頁面發生變化,使用方法如下: 全局定義:main.js window.eventBus = new Vue ...

Wed Jan 30 21:45:00 CST 2019 0 799
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM