Vue中非父子元件傳值的問題

2021-09-11 08:47:16 字數 1004 閱讀 8792

今天在做專案的時候需要非父子元件之間進行傳值,通過以下鏈結解決問題,進行記錄下。

**:父子元件傳值的問題,前面已經講過,不再敘述,這裡來說一種非父子元件的傳值。

vue官網指出,可以使用乙個空vue例項作為事件**線!

也就是說 非父子元件之間的通訊,必須要有公共的例項(可以是空的),才能使用$emit獲取$on的資料引數,實現元件通訊 

這裡舉個例子來說明一下。

公共例項檔案bus.js,作為公共數控**匯流排

import vue from "vue";

export default new vue();

第乙個元件 first.vue

import bus from '../bus.js';

export default

},methods:

}}

第二個元件second.vue

import bus from '../bus.js';

export default

},mounted:function()

});}}

這樣,就可以在第二個非父子關係的元件中,通過第三者bus.js來獲取到第乙個元件的value。

兄弟元件之間與父子元件之間的資料互動,兩者相比較,兄弟元件之間的通訊其實和子元件向父元件傳值有些類似,其實他們的通訊原理都是相同的,

例如子向父傳值也是$emit和$on的形式,只是沒有eventbus,但若我們仔細想想,此時父元件其實就充當了bus這個事件匯流排的角色。

這種用乙個vue例項來作為**事件匯流排來管理元件通訊的方法只適用於通訊需求簡單一點的專案,對於更複雜的情況,vue也有提供更複雜的狀態管理模式vuex來進行處理,請自行到官網進行學習。

Vue 中非父子元件間的傳值

非父子之間傳值,可以採用發布訂閱模式,這種模式在 vue 中被稱為匯流排機制,或者叫做bus 發布訂閱模式 觀察者模式 vue.prototype.bus new vue 掛載 bus 屬性 vue.component child props template methods mounted let...

Vue 中非父子元件間的傳值

非父子之間傳值,可以採用發布訂閱模式,這種模式在 vue 中被稱為匯流排機制,或者叫做bus 發布訂閱模式 觀察者模式 vue.prototype.bus new vue 掛載 bus 屬性 vue.component child props template methods mounted let...

Vue 中非父子元件間的傳值

非父子之間傳值,可以採用發布訂閱模式,這種模式在 vue 中被稱為匯流排機制,或者叫做bus 發布訂閱模式 觀察者模式 root dell lee vue.prototype.bus new vue 掛載 bus 屬性 vue.component child props template metho...