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

Posted 2023-02-23

【中文标题】Vue.js 动态组件——传递数据

【英文标题】：Vue.js dynamic components - passing data

【发布时间】：2017-03-31 00:33:21

【问题描述】：

我是 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 时，切换一切正常。我还没有弄清楚如何最好地将产品信息传递给编辑组件，使其最终成为数据。我想 list 和 edit 组件是主 Vue 实例的两个兄弟组件，同时实例化。我需要做的是，当我单击列表表中的一行时，让用于构建该行的产品对象可用于编辑组件。我不确定我是如何做到的（至少，以正确的 Vue 方式）。当显示的组件被切换（通过'currentView'的变化）时，是否为新（重新）显示的组件调用了一些事件？如果是这样，我大概可以调用一些函数？

稍后：我确定当我切换到编辑产品组件时调用了“激活”挂钩，我想我应该能够以某种方式使用它。现在要弄清楚这一点。

【参考方案1】：

您可以为此使用Vuex。 Vuex 是一个受 Flux 启发的 Vue 状态管理库。

您的应用程序基本上有两种不同的状态：(1) 未选择任何产品 (list-products 组件)，以及 (2) 已选择任何产品 (edit-product)。当使用 Vuex 进行建模时，想法是将当前选择的产品保存在所谓的 store 中，并让组件根据 store 状态找出它们的内部状态。这是一个例子：

创建一个商店来保持应用程序状态：

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。

【讨论】：

谢谢，这看起来不错。目前我让它工作，尽管以一种相当不令人满意的方式，只需在列表组件的根实例 (vm.currentProduct=product) 中设置一个数据属性，然后将该属性用于编辑组件中的数据。一个怪癖是keep-alive妨碍了自动更新，所以我必须在编辑组件的“激活”钩子中执行“this.product=vm.currentProduct”，所以每次切换到它都会更新。