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>, которое создает избыточность кода.Есть ли лучший способ понять это?