Vue.js：如何在单个vue组件中呈现多个动态组件？

Question

我有一个组件，它注册了多个子组件。对于不同的文件或角色，我需要显示不同的子组件。这些组件位于组件的不同部分。我目前的认识是在模板部分中放置多个<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>占位符定义，这使代码变得多余。有没有更好的方法来实现这一目标？