vue中tab切换前端实现_vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

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

1、vue如何使用element-ui

上一篇文章已经分享了如何在vue中使用element-ui创建tab组件切换内容(需要了解的朋友点击链接查看)

2、创建相应文件。

a、创建父组件 src/components/tabZujian.vue

b、创建自组件(被切换的组件)src/tabComponents 文件夹

+ + tabComponents(目录)

---- tabZujianChild1.vue

---- tabZujianChild2.vue

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

tabZujian.vue

import tabZujianChild1 from '@/tabComponents/tabZujianChild1'

import tabZujianChild2 from '@/tabComponents/tabZujianChild2'

export default {

name: 'tabZujian',

components:{

child1:tabZujianChild1,

child2:tabZujianChild2

},

data() {

return {

//默认第一个选项卡

activeName: "first",

}

},

mounted(){

}

}

tabZujianChild1.vue

我是第一个自组件

export default {

name: 'child1',

mounted(){

console.log("tab1组件")

}

}

tabZujianChild2.vue

我是第二个子组件

export default {

name: 'child1',

mounted(){

console.log("tab2组件")

}

}

默认是tab1显