vue+element ui中tabs标签页,跳转新的页面
使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。1.建立父组件 aaa.vue 建立子组件bbb.vue和ccc.vue在父组件中写以下代码<!--aaa页面 父组件--><template><div class="tabZujian"><el-tabs v-model="activeName"@tab
·
使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件。
1.建立父组件 aaa.vue 建立子组件bbb.vue和ccc.vue
在父组件中写以下代码
<!--aaa页面 父组件-->
<template>
<div class="tabZujian">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="第一个页面" name="first" :key="'first'">
<child1 v-if="isChildUpdate1"></child1>
</el-tab-pane>
<el-tab-pane label="第二个页面" name="second" :key="'second'">
<child2 v-if="isChildUpdate2"></child2>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import ZongLanProcess from './bbb'
import ytProcess from './ccc'
export default {
name: 'tabZujian',
components: {
child1: ZongLanProcess,
child2: ytProcess
},
data () {
return {
// 默认第一个选项卡
activeName: 'first',
// 初始化两个变量 isChildUpdate1:true,isChildUpdate2:false;
// 使用v-if控制child1和child2是否渲染。
// 每次切换tab选项的时候,触发事件。让当前点击的tab变量设置位true,让当前组件重新渲染。
// 这时候当你来回切换的时候,通过v-if判断是否重新渲染当前组件
isChildUpdate1: true,
isChildUpdate2: false
}
},
mounted () {
},
methods: {
handleClick (tab) {
if (tab.name === 'first') {
this.isChildUpdate1 = true
this.isChildUpdate2 = false
this.isChildUpdate3 = false
this.isChildUpdate4 = false
} else if (tab.name === 'second') {
this.isChildUpdate1 = false
this.isChildUpdate2 = true
this.isChildUpdate3 = false
this.isChildUpdate4 = false
}
}
}
}
</script>
2.在子组件中 bbb.vue
<template>
<div class="child1">
我是第一个自组件
</div>
</template>
<script>
export default {
name: 'child1'
}
</script>
3.在ccc.vue
<template>
<div class="child2">
我是第二个自组件
</div>
</template>
<script>
export default {
name: 'child2'
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)