vue动态创建组件

 <el-tabs v-model="activeName"
                   @tab-click="handleClick">
            <el-tab-pane v-for="item in elTabPaneList"
                         :key="item.name"
                         :name="item.name"
                         :label="item.label">
              <component :is="item.name"
                         :key="item.name"
                         v-if="activeName === item.name"></component>
            </el-tab-pane>
          </el-tabs>
elTabPaneList: [
        {
          label: '详情概览',
          name: 'detailInfo'
        },
        {
          label: '虚拟网卡',
          name: 'virtualCard'
        },
        {
          label: '挂载虚拟磁盘',
          name: 'disk'
        },
        {
          label: '事件查询',
          name: 'dataEvent'
        },
        {
          label: '操作任务',
          name: 'dataTask'
        }
      ]
 components: {
    detailInfo,
    virtualCard,
    disk,
    dataEvent,
    dataTask
  },

 vue.extend用法,局部组件定义,需要挂载dom元素上

原文地址:https://www.cnblogs.com/webljl/p/14355660.html