在 vue.js 中的组件之间传递数据的最佳方式是什么？

Question

假设我有一个 App.vue。 Query.vue和Result.vue是它的children。

路由器看起来像这样：

import Query from '@/components/Query'
import Result from '@/components/Result'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'query',
      component: Query
    }, {
      path: '/result',
      name: 'result',
      component: Result
    }
  ]
})

Query.vue中有一个按钮，点击后会向API发送POST请求：

  this.$http.post(url, {
    arg1: arg1,
    arg2: arg2
  }).then(function (response) {
    data = response.data

    // I want to do something like:
    this.$router.push({path: 'result', payload: data})

  }, function (response) {})

然后在Query.vue，我可以处理payload。

不过好像不行。我应该使用 store 来制作吗？

  this.$http.post(url, {
    data: "some data"
  }).then(function (response) {
    store.store(response.data)
    this.$router.push({path: 'result'})
  }, function (response) {})

Answer 1

如果您只需要将一些数据从父级单向传递给子级 - 使用 PROPS。
如果您需要将数据从子级传递给父级 - 使用事件
如果您需要在多个组件之间保持一些数据同步（不是 parent/child）- 使用 VUEX

在 vue.js 中的组件之间传递数据的最佳方式是什么？

What is the best way to pass data between components in vue.js?

vue.js

vue-router

vuex