标签：abc auto 初始化 color 需求 back bsp component 问题解决
本篇文章使用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
<template> <div class="tabZujian"> <el-tabs v-model="activeName"> <el-tab-pane label="tab1" name="first" :key="‘first‘"> <child1></child1> </el-tab-pane> <el-tab-pane label="tab2" name="second" :key="‘second‘"> <child2></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", } }, mounted(){ } } </script>
tabZujianChild1.vue
<template> <div class="child1"> 我是第一个自组件 </div> </template> <script> export default { name: ‘child1‘, mounted(){ console.log("tab1组件") } } </script>
tabZujianChild2.vue
<template> <div class="child2"> 我是第二个子组件 </div> </template> <script> export default { name: ‘child1‘, mounted(){ console.log("tab2组件") } } </script>
默认是tab1显示 切换到tab2显示也成功了
1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本
2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console
3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2
4、解决
这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件
更改一下tabZujian.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>
这回当你没吃切换tab的时候在注意v8的console
成功了
最后：
本文档意在与帮助初学者快速掌握tab切换。自己遇到的一些问题，在此进行总结，希望能够帮助到大家。如果有写的不对或者有出入的地方，还请指正。如需转载保存，请署上 转载地址。谢谢配合。
vue + element-ui 制作tab切换（切换vue组件，踩坑总结）
标签：abc auto 初始化 color 需求 back bsp component 问题解决
原文地址：https://www.cnblogs.com/wangweizhang/p/10251758.html
