Vue3的components

升级Vue3后存在着无数的don’t会

用于切换的components的异步不能用了，以为被删除了呢
后来思否的朋友给予了帮助 杨淑璟

components: {
    md1: () => import("./mds/1.md"),
    md2: () => import("./mds/2.md"),
}

---

如今Vue3import {xxx} from 'vue',他也不例外。
快速切换使用components。

<template>
    <span v-for="(item, key) in list" @click="ck(item.link)">
        {{item.name}}
    </span>
    <component :is="md"></component>
</template>

<script>
    import { defineAsyncComponent } from "vue"
    export default {
        data() {
            return {
                md: "md1",
                list: [
                    { name: "首页", link: "md1" },
                    { name: "新闻", link: "md2" }
                ]
            }
        },
        components: {
            md1: defineAsyncComponent(() => import("./views/About.vue")),
            md2: defineAsyncComponent(() => import("./views/Home.vue"))
        },
        methods: {
            ck(link) {
                this.md = link;
            }
        }
    }
</script>

---

如果少就不用遍历了， 直接点击！

<template>
    <button @click="md = 'md1' ">A套餐</button>
    <button @click="md = 'md2' ">B套餐</button>
    <component :is="md"></component>
</template>

<script>
    import { defineAsyncComponent } from "vue"
    export default {
        data() {
            return {
                md: "md1"
            }
        },
        components: {
            md1: defineAsyncComponent(() => import("./views/About.vue")),
            md2: defineAsyncComponent(() => import("./views/Home.vue"))
        }
    }

---

Vue的官方API

在这里