component 标签是Vue框架自定义的标签,它的用途就是可以动态绑定我们的组件,根据数据的不同更换不同的组件。标签里的is属性值是对应的组件名称。
component标签详细使用方法:https://blog.csdn.net/liangmengbk/article/details/85013547
是element的ui组件,通过@tab-click方法,改变is的值`
<template>
<div class="tabBox">
<el-tabs v-model="val" @tab-click="handleClick">
<el-tab-pane
v-for="(item, index) in tabList"
:key="index"
:label="item.name"
:name="item.label"
></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
props: {
tabList: {
type: Array,
default() {
return [];
}
},
radio: String
},
data() {
return {
val: this.radio
};
},
watch: {
radio(newVal) {
// console.log("我被监听了", newVal);
this.val = newVal;
}
},
methods: {
// handleRadioChange(val) {
// this.$emit("changeTab", val);
// },
handleClick(tab) {
// console.log("tab", tab);
this.$emit("changeTab", tab.name);
}
}
};
</script>
`
这样就实现类似css切换的效果,不用v-if或路由