vue3中结合component ：is使用tabs切换组件

原创已于 2022-07-27 23:28:59 修改 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-07-27 22:36:20 首次发布

vue3 专栏收录该内容

21 篇文章

订阅专栏

该博客介绍了如何在Vue项目中利用van-tabs组件和Vue Router实现动态Tab切换。通过v-for遍历组件列表并设置v-model及to属性，结合router.js中的子路由配置，实现在点击Tab时加载对应组件或视图。示例代码展示了Child1和Child2组件的切换，并提供了parent组件的模板和脚本部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>