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

KAGHQ

已于 2022-07-27 23:28:59 修改

阅读量2.5k

点赞数 1

分类专栏： # vue3 文章标签： vue.js 前端 javascript

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

本文链接：https://blog.csdn.net/LRQQHM/article/details/126024592

版权

vue3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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