Vue.js動的コンポーネント - データを渡す

Question

Vue.jsを新しく追加しました私はここでチュートリアル（https://coligo.io/dynamic-components-in-vuejs/）に従っています。ダイナミックなコンポーネントでは、私が好きだったダイナミックなレイアウトを提供し、製品をリストし、ユーザーがテーブル内の製品の1つをクリックすると編集ビューに切り替えることができます。したがって、私は、 'list-products'コンポーネントと 'edit-product'コンポーネントを持っており、どちらが表示されるかは、メインVueインスタンスの 'currentView'の状態に依存します。

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

currentViewが変更された場合、切り替えはすべて正常に動作しています。私が把握していないのは、製品情報を編集コンポーネントに渡して、データとして終わるようにすることです。私はリストと編集コンポーネントがVueインスタンスの2つの兄弟コンポーネントであり、同時にインスタンス化されていると考えます。私がする必要があるのは、リスティングテーブルの行をクリックし、その行を作成するために使用されたプロダクトオブジェクトを編集コンポーネントで使用できるようにすることです。私はどのようにそれを（少なくとも、適切なVueの方法で）行うのか分からない。表示されたコンポーネントが（ 'currentView'の変更を介して）切り替わると、新しく表示されたコンポーネントに対して何らかのイベントが呼び出されますか？もしそうなら、私はおそらくいくつかの機能を呼び出すことができますか？

後で：私は何とか使うことができるはずだと思う編集製品コンポーネントに切り替えると、「活性化された」フックが呼び出されると判断しました。今それを理解する。

Answer 1

これにはVuexを使用できます。 Vuexは、VueのためのFluxの影響を受けた状態管理ライブラリです。

アプリケーションには基本的に2つの異なる状態があります：（1）選択されていない製品（list-productsコンポーネント）、および（2）選択された製品（edit-product）。これをVuexでモデル化すると、現在選択されている製品をいわゆるストアに保存し、ストアの状態に応じてコンポーネントが内部状態を把握できるようにすることが考えられます。あなたのlist-productsコンポーネントに

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

ハンドル製品の選択：

アプリケーションの状態を維持するためにストアを作成します。

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です。