vue项目中tab切换和自定义组件的使用

使用tab切换调用组件，若是多个组件，自然没啥问题，但是若是重复调用同一个组件，则会出现数据冲突的问题，所以在这里我使用<component/>来进行组件的调用。

<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="tab1" name="first" />
      <el-tab-pane label="tab2" name="second" />
      <el-tab-pane label="tab3" name="third" />
      <el-tab-pane label="tab4" name="fourth" />
    </el-tabs>
    <component :is="isComponent"  />

data() {
    return {
      activeName: 'first',
      componentsList: {
        first: Annual, // 需要引入具体的组件
        second: HotSites,
        third: Rectifice,
        fourth: Corpse
      },
    };
  },
computed: {
    isComponent() {
      return this.componentsList[this.activeName];
    }
  },

如此，你每次点击切换tab的时候，组件都会进行重置数据