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动态组件 - 传递数据

回答

相关问题