Vue路由器将数据传递给另一个组件

Question

我在使用Vue路由器将数据从一个组件传递到另一个组件时遇到问题。

我在主组件中有此模板：

<li><router-link to="/">Daily</router-link></li>
<li><router-link to="/weekly/">Weekly</router-link></li>
<router-view></router-view>

在我的DailyComponent组件中，我有以下数据功能：

data() {
  return {
    userCount: 0,
  }
}

第二个链接将发送到名为AcclyComponent的组件。

如何将userCount:0数据从DailyComponent传递到WeeklyComponent，然后显示在那里？

谢谢

Answer 1

您可以使用Vuex或全局事件总线之类的工具。您还可以为这两个组件创建一个公共父组件。

如果您使用事件总线，您可以使用这些值发出事件，并在应用程序中的任何位置收听这些事件。如果您有一个公共父组件，则可以将userCount作为道具传递给两个子组件，然后将事件从子组件发送到父组件。每当一个子级想要更改值时，它都会发出事件，然后父级代表它更改值。

Answer 2

这个问题更多的是关于如何以这种方式构建组件，以便在组件之间共享数据。有很多方法可以做到这一点，根据具体情况，每种方法都有各自的优缺点。我建议您搜索stackoverflow/google，寻找实现这一点的方法，因为已经对其进行了深入讨论。

将userCount数据的所有者提升到父级

使父组件成为userCount数据的所有者，并通过props将其传递给子组件。如果子组件想要修改该数据，它们必须$emit一个带有父组件响应的新值的事件，以便更新该值。

const Daily = {
  props: ['userCount'],
  template: '<p>Daily: {{ userCount }} <button @click="increment">+ 1</button></p>',
  methods: {
    increment() {
      this.$emit('user-count', this.userCount + 1);
    }
  }
};

const Weekly = {
  props: ['userCount'],
  template: '<p>Weekly: {{ userCount }} <button @click="increment">+ 5</button></p>',
  methods: {
    increment() {
      this.$emit('user-count', this.userCount + 5);
    }
  }
};

new Vue({
  el: '#app',
  router: new VueRouter({
    routes: [
      { path: '/daily', component: Daily },
      { path: '/weekly', component: Weekly }
    ]
  }),
  data: {
    userCount: 0,
  },
})

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/daily">Daily</router-link>
  <router-link to="/weekly">Weekly</router-link>
  
  <router-view :user-count="userCount" @user-count="userCount = $event"></router-view>
</div>