Vue 中非父子元件間的傳值

非父子之間傳值，可以採用發布訂閱模式，這種模式在 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 中非父子元件間的傳值

Vue 中非父子元件間的傳值

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

相關推薦