vue 动态组件

---

1.动态组件：使用:is在不同组件之间进行动态切换

        让多个组件使用同一个挂载点，并动态切换，这就是动态组件。通过 Vue 的 <component> 元素加一个特殊的 :is 特性来实现。

2.完整代码

   动态标签页

<el-tabs v-model="editableTabsValue" type="card" class="recordinfor" style="background: #EFF2F1">
  <el-tab-pane v-for="(item) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
    <component :is=item.content></component>
  </el-tab-pane>
</el-tabs>

   methods: {
      addTab (targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabsValue = newTabName;
        if (targetName === '基本信息') {
          this.show = true
        } else {
          this.show = false
        }
      },
    },
    mounted () {
        this.addTab(name)
    },

 

  import recordSite from './recordSite.vue'
  import recordEquipment from './recordEquipment.vue'
  import recordPerson from './recordPerson.vue'
  import recordSchool from './recordSchool.vue'
  import recordVehicle from './recordVehicle.vue'
  import recordLine from './recordLine.vue'   
   //声明组件
    components: {
      recordSite,
      recordEquipment,
      recordPerson ,
      recordSchool ,
      recordVehicle ,
      recordLine
    }
     //数据
        editableTabs: [{
          title: '考试场地信息',
          name: '1',
          content: 'recordSite'
        }, {
          title: '考试设备信息',
          name: '2',
          content: 'recordEquipment'
        }, {
          title: '考试员信息',
          name: '3',
          content: 'recordPerson'
        }, {
          title: '驾校信息',
          name: '4',
          content: 'recordSchool'
        }, {
          title: '考试车辆信息',
          name: '5',
          content: 'recordVehicle'
        }, {
          title: '考试线路',
          name: '6',
          content: 'recordLine'
        }],