vue+element-ui tab切换 - 简书 - 程序猿·D·安宇雨 DeepMind

vue+element-ui tab切换 - 简书

安宇雨 - 随手采集
2021-08-06 13:31:07
随手采集
0000-未整理-等待研究

1.使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。

2.创建相应文件。
a、创建父组件 src/components/tab.vue
　　b、创建自组件（被切换的组件）src/tabComponents 文件夹
　　+ + tabComponents（目录）
　　---- tabChild1.vue
　　---- tabChild2.vue

3.编写组件实现tab切换不同子组件

tab.vue

<template>
    <div class="tabZujian">
        
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="tab1" name="first" :key="'first'">
                <child1 v-if="isChildUpdate1"></child1>
            </el-tab-pane>
    
            <el-tab-pane label="tab2" name="second" :key="'second'">
                <child2 v-if="isChildUpdate2"></child2>    
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script>
import tabZujianChild1 from '@/tabComponents/tabZujianChild1'
import tabZujianChild2 from '@/tabComponents/tabZujianChild2'
export default {
    name: 'tabZujian',
    components:{
        child1:tabZujianChild1,
        child2:tabZujianChild2
    },
    data() {
        return {
            //默认第一个选项卡
            activeName: "first",
            isChildUpdate1:true,
            isChildUpdate2:false
        }
    },
    mounted(){
        
    },
    methods:{
        handleClick(tab) {
            if(tab.name == "first") {
                this.isChildUpdate1 = true;
                this.isChildUpdate2 = false;
            } else if(tab.name == "second") {
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = true;
            }
        }
    }
}
</script>

tabChild1.vue

<template>
    <div class="child1">
        我是第一个自组件
    </div>
</template>

<script>
    export default {
      name: 'child1',
      mounted(){
          console.log("tab1组件")
      }
    }
</script>

tabChild2.vue

<template>
    <div class="child2">
        我是第二个子组件
    </div>
</template>

<script>
    export default {
      name: 'child1',
      mounted(){
          console.log("tab2组件")
      }
    }
</script>

效果图