在这里插入代码片
```<template>
<!-- 基于el-tabs二次封装 -->
<el-tabs v-model="temp" @tab-click="handleClick" class="my-el-tabs">
<el-tab-pane
:label="item.label"
v-for="(item, index) in temList"
:key="index"
:name="item.name"
>
<slot :name="item.name"></slot>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name: "mElTabs",
props: {
activeName: {
type: String,
},
tabList: {
type: Array,
default: [],
},
},
data() {
return {
//用临时变量代替。防止出现子组件修改父组件数据报错,很讨厌报错
temp: this.activeName,
temList: this.tabList,
};
},
methods: {
//点击方法拉出去,用的时候更灵活
handleClick(tab) {
this.$emit('changeTabs',tab)
},
},
computed: {},
watch:{
//这是引用的时候想通过父组件事件修改当前tabs选中项
activeName:{
handler(n,o){
this.temp=n
}
}
}
};
</script>
很简单的封装,封装肯定更好用,至少少了好几行代码
el-tabs封装
最新推荐文章于 2024-08-21 15:30:02 发布