Vue-Router访问组件数据

Question

我正在使用Vue-Router文档给出的示例

html：

<div id="app">
  <h3>{{title}}</h3>
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

javaScript：

const Foo = { template: '<div>foo</div>', data: {title: "Foo" }
const Bar = { template: '<div>bar</div>', data: {title: "Bar" }

是否可以在锚点外访问选定的组件数据并更新{{title}}标头？

完整的示例在这里

Answer 1

我有两种可能性。首先是使用this.$parent.title直接编辑您的父数据。第二种方法是触发事件this.$parent.$emit('changeTitle', 'foo');。

我认为最后一个更好，因为您的状态的控制始终在您的父部件中。

const Home = { 
  template: '<div>Home</div>', 
  data: {
    title: "Home"
  },
  mounted() {
    this.$parent.title = 'home'; // directly
  }
}
const Foo = { 
  template: '<div>Foo</div>', 
  data: {
    title: "Foo"
  },
  mounted() {
    this.$parent.$emit('changeTitle', 'foo'); // emit an event
  }
}
const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/', 
      component: Home 
    },
    { 
      path: '/foo', 
      component: Foo 
    }
  ]
})
new Vue({
  router,
  el: '#app',
  data: {
    title: 'Initial'
  },
  destroy() {
    this.$off('changeTitle');
  },
  created() {
    const _self = this;
    
    this.$on('changeTitle', function(newTitle) {
      _self.title = newTitle;
    });
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h3>{{title}}</h3>
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>