Vue.js動態組件 - 傳遞數據

Question

我是Vue.js的新手。 我按照這里的教程 - https://coligo.io/dynamic-components-in-vuejs/ - 關於動態組件，給我一個我喜歡的動態布局，用於列出產品並允許用戶切換到編輯視圖時他們點擊表格中的一個產品。 所以，我有一個'list-products'組件和一個'edit-product'組件，顯示哪一個組件取決於主Vue實例中'currentView'的狀態。

<div id="content">
  <keep-alive>
    <component :is="currentView"></component>
  </keep-alive>
</div>

當currentView被更改時，切換工作正常。 我還沒想到的是如何最好地將產品信息傳遞給編輯組件，使其最終成為數據。 我想列表和編輯組件是主Vue實例的兩個兄弟組件，同時實例化。 我需要做的是當我單擊列表中的一行時，讓產品對象用於構建該行可用於編輯組件。 我不知道我是怎么做到的（至少，以適當的Vue方式）。 當切換顯示的組件時（通過'currentView'的更改），是否有一些事件要求新（重新）顯示的組件？ 如果是這樣，我可能會調用某些功能？

后來：當我切換到編輯產品組件時，我已經確定調用了'激活'鈎子，我想我應該能夠以某種方式使用它。 現在想出來。

Answer 1

你可以使用Vuex 。 Vuex是Vue的Flux靈感狀態管理庫。

您的應用程序基本上有兩種不同的狀態：（1）未選擇產品（ list-products組件），以及（2）選擇的任何產品（ edit-product ）。 當使用Vuex建模時，我們的想法是將當前選定的產品保留在所謂的商店中，讓組件根據商店狀態確定其內部狀態。 這是一個例子：

創建商店以保持應用程序狀態：

const store = new Vuex.Store({
    state: {
        selectedProduct: null
    },
    getters: {
        selectedProduct: state => state.selectedProduct
    },
    mutations: {
        selectProduct: (state, data) => state.selectedProduct = data
    }
});

處理list-products組件中的產品選擇：

methods: {
    selectProduct(product) {
        this.$store.commit('selectProduct', product);
    }
}

在edit-product產品中顯示當前edit-product ：

Vue.component('edit-product', {
    store,
    template: '<div>{{selectedProduct.name}}</div>',
    computed: Vuex.mapGetters(['selectedProduct'])
});

最后根據狀態切換組件：

new Vue({
    el: '#app',
    store,
    computed: Object.assign(Vuex.mapGetters(['selectedProduct']), {
        currentView() {
            return this.selectedProduct ? 'edit-product' : 'list-products'
        }
    })
});

這是一個基本的工作JSFiddle 。