Vue 中非父子元件間的傳值

2021-09-12 16:46:57 字數 2251 閱讀 5414

非父子之間傳值,可以採用發布訂閱模式,這種模式在 vue 中被稱為匯流排機制,或者叫做bus/ 發布訂閱模式 / 觀察者模式

vue.prototype.bus = new vue()           //掛載 bus 屬性

vue.component('child',

},props: ,

template: '}

', methods:

},mounted())

}})let vm = new vue()

vue.prototype.bus = new vue()這句話的意思是,在 vue 的prototype掛載了乙個bus屬性,這個屬性指向 vue 的例項,只要我們之後呼叫 vue 或者new vue時,每個元件都會有乙個bus屬性,因為以後不管是 vue 的屬性還是 vue 的例項,都是通過 vue 來建立的,而我在 vue 的prototype上掛載了乙個bus的屬性。

元件被掛載之前會執行mounted鉤子函式,所以可以在mounted中對change事件進行監聽。

this.bus.$on()那邊會被執行兩次,原因是什麼呢?因為在乙個child元件裡面,觸發事件的時候,外面兩個child的元件都進行了同乙個事件的監聽,所以兩個child的元件都會執行一遍this.bus.$on()

兩個兄弟元件之間公共的父元件,那麼它們就沒法通過乙個公用的父元件來進行資料的中轉,要實現這兩個頁面元件的資料通訊應該怎麼辦呢?

vuex是 vue 官方推薦的資料框架,在 vue 的大型專案開發之中,vue 只能承擔檢視層的內容,而當我們涉及到大量資料傳遞的時候,往往都需要乙個資料框架進行輔助,vue 之中這個資料框架就是vuex

看上圖vuex指的是整個圖中虛線部分的內容。

vuex是什麼呢?當我們的乙個專案之中,比如說多個元件之間進行複雜的資料傳遞很困難的時候,如果能把這些公用的資料,放在乙個公共的儲存空間去儲存,然後某乙個元件改變了這個公共的資料,其他的元件就能感知到,不就可以了嗎。vuex的設計理念就是這樣的。

回到上圖,右側虛線那塊的圖就是公用資料儲存區域,我們可以把這個區域理解成store倉庫,這個倉庫是由幾部分組成的:

結論:只有通過mutations才能改變state中公用資料的值,這一步也不是絕對的,有時候可以略過actions這一步,讓元件直接呼叫mutations修改state中的資料。這裡需要注意的是元件呼叫actions是通過dispatch方法,而元件直接呼叫actions或者actions呼叫mutations是通過commit方法。

其實它就是乙個單向資料的改變流程。

具體看下**是怎麼實現的:

export default new vuex.store(,

actions:

},mutations: }})

元件需要使用就可以直接這樣使用this.$store.state.name當其他地方需要修改name時,可以這樣寫

handlenameclick (name)
這邊我在改變state時沒有任何非同步操作,而且這個操作也非常簡單,這個時候元件其實沒有必要去呼叫actions做這個**,元件可以直接去呼叫mutations

handlenameclick (name)

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...

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

今天在做專案的時候需要非父子元件之間進行傳值,通過以下鏈結解決問題,進行記錄下。父子元件傳值的問題,前面已經講過,不再敘述,這裡來說一種非父子元件的傳值。vue官網指出,可以使用乙個空vue例項作為事件 線!也就是說 非父子元件之間的通訊,必須要有公共的例項 可以是空的 才能使用 emit獲取 on...