routerview中的控制器和父级之间的两种方式绑定

Question

我有一个单页应用程序，其中包含：

包含标题和菜单的导航组件 路由器视图 我希望在路由器视图中显示与路由器中的状态相对应的每个组件，以更新导航组件的标题。如何将参数从路由器视图中的组件传递到外部导航组件。

我正在使用 vue 2.0

Answer 1

我会为此推荐 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')
  },
  ...

Answer 2

你可以只包含一个包含所有Main组件来存储当前路由，并将其作为props传递给导航和路由器视图组件，那么情况是：

• 当Main 存储的路线发生变化时，导航会相应地重新渲染。
• 对于路由器视图组件，watchprop 更改，this.$router.push('/some/where') 更改时。
• 当用户点击导航上的一个项目时，它emits 一个事件，连同数据（用户想要去的路线），父母收到事件，改变其存储的路线，根据到最后 2 个项目符号，更改导航和路由器视图的外观。

路由必须是父级的一部分，因为 vue 使用父级到子级的单向数据流。除非我们使用上一段中描述的某种方法，否则孩子们无法在没有共同父母的帮助下相互交流。

具体如何实现父子数据共享，见doc。

上面是最简单的解决方案，当您的路线嵌套时，它会很快变脏。如果是这样，您将需要 global event bus 用于非父子数据传递，或者，如果您正在查看大型应用程序并希望您的全局状态得到很好的包含，则需要 vuex。