vue3中结合component :is使用tabs切换组件
代码】vue3中结合componentis使用tabs切换组件。
·
<template>
<div class="mine-ask">
<van-tabs v-model:active="active">
<van-tab
:title="item.title"
v-for="item in componentList"
:key="item.comName"
>
<component :is="item.comName"></component>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import {
shallowRef,
defineComponent,
getCurrentInstance,
reactive,
ref,
} from "vue";
import Child1 from "./components/Child1.vue";
import Child2 from "./components/Child2.vue";
export default defineComponent({
name: "",
// 注册你的组件
components: {
Child2,
Child1,
},
props: {},
emits: {},
setup(props, { attrs, slots, emit, expose }) {
const active = ref("");
return {
active,
componentList: [
{
title: "Child1",
comName: "Child1",
},
{
title: "Child2",
comName: "Child2",
},
],
};
},
methods: {},
});
</script>
使用router实现tabs切换
router.js
{
path: "/parent",
name: "parent",
component: () => import("@/views/parent/index.vue"),
meta: {
title: "父路由",
},
children: [
{
path: "child1",
name: "child1",
component: () =>
import("@/views/parent/components/child1.vue"),
meta: {
title: "",
},
},
{
path: "child2",
name: "child2",
component: () => import("@/views/parent/components/child2.vue"),
meta: {
title: "",
},
},
],
},
parent组件中
<template>
<div class="mine-ask">
<van-tabs v-model:active="active">
<van-tab
:title="item.title"
v-for="item in componentList"
:key="item.comName"
:to="item.routeName"
>
<router-view></router-view>
</van-tab>
</van-tabs>
</div>
</template>
import {
shallowRef,
defineComponent,
getCurrentInstance,
reactive,
ref,
} from "vue";
import Child1 from "./components/Child1.vue";
import Child2 from "./components/Child2.vue";
export default defineComponent({
name: "",
// 注册你的组件
components: {
Child2,
Child1,
},
props: {},
emits: {},
setup(props, { attrs, slots, emit, expose }) {
const active = ref("");
return {
active,
componentList: [
{
title: "",
routeName: "/mineAsk/askListMine",
comName: "AskList",
},
{
title: "",
routeName: "/mineAsk/answernListMine",
comName: "AnswernList",
},
],
};
},
methods: {},
});
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)