路由器视图中的控制器和父级控制器之间的两种方式绑定 [英] Two way binding between controller in routerview and parent

问题描述

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

I have a single page application which consists of a:

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

A navigation component which contains a title and a menu A router-view I'd like each component being presented in the router view which correspond to a state in the router, to update the title of the navigation component. How to go about passing the parameters from the components in the router-view to the outer navigation component.

我使用的是 vue 2.0

I'm using vue 2.0

推荐答案

我会为此推荐 Vuex:

I would recommending Vuex for this:

https://github.com/vuejs/vuex

这样你就可以在主组件中访问你的 Vuex store 并显示它的标题:

This way you can access your Vuex store in the main component and display its title:

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

然后您将设置一个变更来更新标题并在您的组件中需要的任何地方调用它.现在，随着 Vue 的响应，导航组件中的标题将更新.

Then you'd set up a mutation to update the title and call this wherever required in your components. Now as Vue is reactive the title within the nav component will update.

下面是一个简短的例子:

Below is an abbreviated example:

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

任何其他需要更新您的标题的组件:

Any other component which needs to update your 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')
  },
  ...

这篇关于路由器视图中的控制器和父级控制器之间的两种方式绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！