Question

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

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

我正在使用vue 2.0

Answer 1

我会为此推荐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组件来存储当前路由，并将其作为prop传递给导航和路由器视图组件，然后情况为：< / p>

当Main存储的路线发生变化时，导航将相应地重新渲染。
表示路由器视图组件，watch prop更改，this.$router.push('/some/where')更改时。
当用户点击导航栏上的某个项目时，emit是一个事件，连同数据（用户想要去的路线），父级接收事件，更改其存储的路线，根据最近的2个子弹，改变导航和路由器视图的外观。

路由必须是父节点的一部分，因为vue使用仅父到子的单向数据流。除非我们使用最后一段中描述的方法，否则儿童在没有父母帮助的情况下无法相互沟通。

有关如何实现父子数据共享的详细信息，请参阅doc。

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

路由器视图中的控制器与父节点之间的双向绑定

2 个答案: