一、父组件
<template>
<div class="page_six">
<el-menu
:default-active="activeIndex"
class="menu_header"
mode="horizontal"
@select="handleSelect"
>
<template v-for="item in tabMenuList" :key="item.id">
<el-menu-item v-if="!item.children" :index="item.id">{{
item.label
}}</el-menu-item>
<el-sub-menu v-else :index="item.id">
<template #title>{{ item.label }}</template>
<el-menu-item
v-for="cItem in item.children"
:key="cItem.id"
:index="cItem.id"
>{{ cItem.label }}</el-menu-item
>
</el-sub-menu>
</template>
</el-menu>
<div class="content_box">
<template v-if="showFlag == '1'">11111</template>
<template v-if="showFlag == '2'">
22222
</template>
<template v-if="showFlag == '3'">333333</template>
<template v-if="showFlag == '4'"><ComTwo :choseTab="choseTab"/></template>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
nextTick,
onMounted,
reactive,
ref,
toRefs,
} from "vue";
import $ from "jquery";
import pageFourTs from "../dataJson/pageFourData";
import ComTwo from "@/components/comTwo.vue";
export default defineComponent({
name: "pageSix",
components: {
ComTwo,
},
setup() {
const activeIndex = ref("1");
const { pageFourState } = pageFourTs();
const state = reactive({
tabMenuList: [] as any,
showFlag: "1",
menuChose: "1",
choseTab:'4-1'
});
function handleSelect(data: string) {
state.showFlag = data;
state.menuChose = data;
state.choseTab = data; // 控制子组件的选项卡
const showReg = RegExp(/\d-\d/g);
if (data.match(showReg)) {
state.showFlag = data.slice(0, 1);
}
}
onMounted(() => {
nextTick(() => {
state.tabMenuList = pageFourState.tabMenuList;
});
});
return {
...toRefs(pageFourState),
...toRefs(state),
activeIndex,
handleSelect,
};
},
});
</script>
<style lang="scss">
.page_six {
width: 100%;
height: 100%;
}
.content_box {
height: 695px;
overflow: auto;
}
</style>
二、子组件comTwo.vue
<template>
<div class="com_two">
<el-tabs
:tab-position="tabPosition"
v-model="editableTabsValue"
style="height: 200px"
>
<el-tab-pane label="用户管理" name="4-1">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="4-2">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="4-3">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="4-4">定时任务补偿</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts">
import {
computed,
defineComponent,
nextTick,
reactive,
Ref,
toRefs,
watch,
} from "vue";
export default defineComponent({
name: "comTwo",
props: {
choseTab: {
type: String,
defalult: "4-1",
},
},
setup(props) {
const state = reactive({
editableTabsValue: "4-1",
tabPosition: "left",
});
// 监听choseTab的改变
const choseTabChange: Ref = computed(() => {
return props.choseTab;
});
watch(
choseTabChange,
() => {
nextTick(() => {
state.editableTabsValue = choseTabChange.value;
});
},
{
immediate: true,
}
);
return {
...toRefs(state),
};
},
});
</script>
<style lang="scss">
.com_two {
margin-bottom: 20px;
}
</style>
三、效果展示描述:
比如:点击菜单栏 配置管理,会自动切换到子组件的配置管理菜单