时间戳

首页 > 解决方案 > Vue.js：如何在单个 Vue 组件中渲染多个动态组件？

javascript - Vue.js：如何在单个 Vue 组件中渲染多个动态组件？

问题描述

我有一个组件，它注册了多个子组件。对于不同的文件或角色，我需要显示不同的子组件。并且这些组件位于组件的不同部分。我目前的实现是将多个<component>占位符定义放在模板部分，如下所示：

<component
  v-for="(plugin, index) in shownPlugins.top"
  :key="index"
  :role="role"
  :model="model"
  :type="type"
  :is="plugin"/>

showPlugins 定义如下：

shownPlugins: {
  top: [],
  left: [],
  right: [],
  bottom: [],
  center: []
}

如您所见，我将有 5 个位置放置<component>占位符定义，这使得代码冗余。有没有更好的方法来实现这一点？

标签： javascriptvue.jsvuejs2

解决方案

推荐阅读