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中显示当前产品：

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。

Vue.js动态组件 - 传递数据

1 个答案: