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

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

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

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

後來：我確定當我切換到編輯產品組件時，調用'激活'鉤子，我想我應該能夠以某種方式使用。現在要弄清楚。

來源

2016-11-16 John Moore

您可以使用Vuex。 Vuex是Vue的Flux靈感狀態管理庫。（1）沒有選擇產品（list-products組件），和（2）選擇任何產品（edit-product）。您的應用程序基本上有兩種不同的狀態：（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：

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。

來源

2016-11-16 22:50:47 Aletheios

謝謝，這看起來不錯。目前，只要通過在列表組件中的根實例（vm.currentProduct = product）中設置數據屬性，然後使用該屬性獲取編輯組件中的數據，即可以非常令人滿意的方式工作。其中一個怪癖是，保持活着妨礙了自動更新，因此我必須在編輯組件的'激活'鉤子中執行'this.product = vm.currentProduct'，因此每次切換到它時都會更新。 –

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

回答

相關問題