Vue-Router 将数据传递给另一个组件

Question

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

我在主要组件中有这个模板：

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

第二个 link 发送到名为 WeeklyComponent 的组件。

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

谢谢！

Answer 1

您可以使用 Vuex or a global event bus 之类的东西。您还可以对两个组件使用一个公共 parent 组件。

如果您使用事件总线，则可以发出带有值的事件并在应用程序的任何位置收听它们。如果你有一个通用的 parent 组件，你可以将 userCount 作为 prop 传递给两个 child 组件，然后将事件从 child 组件发送到 parent .每次 child 想要更改值时，它都会发出事件，然后 parent 代表它更改值。

Answer 2

这个问题更多地是关于如何以这种方式构建组件以在它们之间共享数据。有很多方法可以做到这一点，每种方法都根据情况各有利弊。我建议您搜索 Whosebug/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>

Vuex 或其他一些外部状态管理

已经有很多 Vuex 示例，所以我不会在这里重复，但是你可以想出任何你想要的状态管理系统。

对于您的示例，Vuex 可能有点矫枉过正。您可以只传递一个共享的反应对象。

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

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

new Vue({
  el: '#app',
  router: new VueRouter({
    routes: [
      { path: '/daily', component: Daily },
      { path: '/weekly', component: Weekly }
    ]
  }),
  data: {
    shared: {
      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 :shared="shared"></router-view>
</div>

Vue-Router 将数据传递给另一个组件

Vue-Router passing data to another component

javascript

vue.js

vue-router

vue-component

vuejs2