雙向在routerview控制器和父

Question

之間的結合我有一個單頁應用程序，它由一個：

含有一個標題和菜單的導航組件 甲routerview 我想各成分之中在對應於路由器中的狀態的路由器視圖中呈現以更新導航組件的標題。如何着手將路由器視圖中組件的參數傳遞給外部導航組件。

我使用VUE 2.0

Answer 1

你可以只是有一個包含-所有Main組件，它存儲當前的路線，並把它傳遞到導航併爲他們prop S中的路由器視圖組件，那麼情況是：

• 當Main的存儲路線改變時，導航將相應地重新展現。
• 爲路由器視圖組件，watchprop更改，this.$router.push('/some/where')它改變時。
• 當用戶點擊導航上的一個項目時，它與數據一起（用戶想要去的路線），父母接收事件，更改其存儲的路線，根據最後2個項目符號改變了導航和路由器視圖的外觀。

這些路由必須是父節點的一部分，因爲vue只使用父節點到子節點的單向數據流。除非我們採用最後一節所述的某種方法，否則兒童無法在沒有共同父母幫助的情況下彼此溝通。

有關如何實施親子數據共享的詳細信息，請參閱doc。

以上是最簡單的解決方案，當您的路線嵌套時，它會很快變髒。如果是這樣，您需要global event bus用於非父數據傳遞，或者如果您正在查看大型應用程序，並且希望您的全局狀態良好，則需要vuex。

Answer 2

我會推薦Vuex此：

https://github.com/vuejs/vuex

這樣你就可以訪問你的Vuex店的主要成分，並顯示其標題：

computed: { 
    title() { 
    return this.$store.state.title 
    } 
} 

然後你會成立一個突變來更新標題並在組件中隨時調用它。現在，由於Vue被動，導航組件中的標題將會更新。

下面是一個簡化的例子：

Vuex商店：

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
export default new Vuex.Store({ 
    state: { 
    title: '' 
    }, 
    mutations: { 
    updateTitle (state, title) { 
     state.title = title 
    } 
    } 
}) 

您的應用程序根：

import Vue from 'vue' 
import store from './vuex/store' 
new Vue({ 
    el: '#app', 
    store, 
}) 

導航組件：

export default { 
    computed: { 
    title() { 
     return this.$store.state.title 
    } 
    }, 
    ... 

這就需要任何其他組件給你更新你的標題：

import { mapMutations } from 'vuex' 
export default { 
    methods: { 
    ...mapMutations([ 
     'updateTitle' // map this.updateTitle() to this.$store.commit('updateTitle') 
    ]), 
    }, 
    // if you wanted to call it on mount 
    mounted() { 
    this.updateTitle('hello') 
    }, 
    ...