如何让VUE的组件名动态化

Question

目前遇到一整个这样的需求，假设 product.vue 有如下内容：

<template lang="html">
  <div class="product-box">
    <!--头部组件-->
    <m-header></m-header>
    <!--/头部组件-->

    <!--中间区域-->
    <div class="product-center">
      <!--左侧组件-->
      <product-left></product-left>
      <!--/左侧组件-->

      <!--内容区域-->
      <div class="product-content">
        <product-module1 v-if="moduleName == 'module1'"></product-module1>
        <product-module2 v-else-if="moduleName == 'module2'"></product-module2>
        <product-module3 v-else-if="moduleName == 'module3'"></product-module3>
        <product-module4 v-else-if="moduleName == 'module4'"></product-module4>
      </div>
      <!--/内容区域-->
      
    </div>
    <!--/中间区域-->

    <!--底部组件-->
    <m-footer></m-footer>
    <!--/底部组件-->
  </div>
</template>

moduleName 控制content区域内的模块显示（只有一个模块显示）,但是里面的模块的个数是不可预计的用if else-if的方式来判断太过于低效，每新增一个模块都会去手动判断一个模块的名称，有没有一个简便的方法来控制模块的显示呢？

Answer 1

内置组件component

参考动态组件：动态组件