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

如果您只需要将一个方向的数据从父级传递给子级 - 使用PROPS。
如果您需要将数据从子节点传递到父节点 - USE EVENTS
如果您需要在多个组件（非父/子）之间保持一些数据同步 - 使用VUEX

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

1 个答案: