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

Question

假设我有一个App.vue 。 Query.vue和Result.vue是其子级。

路由器看起来像这样：

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

1. 如果您只需要从父母到孩子一个方向传递一些数据，请使用USE PROPS。
2. 如果您需要将数据从孩子传递给父母-使用事件
3. 如果您需要在许多组件（而不是父/子）之间保持某些数据同步-USE VUEX