0
点赞
收藏
分享

微信扫一扫

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

一叶轻舟okok 2021-09-30 阅读 71
Vue脚手架

使用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的时候,组件都会进行重置数据

举报

相关推荐

0 条评论