javascript - 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" }

是否可以在 anchor 之外访问选定的组件数据并更新 {{title}} header ？

完整示例为here

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>