在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一個按鈕，點擊後，它會發送一個POST請求API：

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，我可以處理​​。

但似乎不可能。我應該使用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. 如果你只需要通過一些數據從父一個定向到子 - 使用的道具。
2. 如果您需要從孩子的數據傳遞給父 - 使用事件
3. 如果你需要保持在多個組件（未父/子）同步一些數據 - 使用VUEX