使用場(chǎng)景：

多個(gè)組件通過(guò)component標(biāo)簽掛載在同一個(gè)組件中，通過(guò)觸發(fā)時(shí)間進(jìn)行動(dòng)態(tài)切換。vue3與vue2用法不一樣，這里有坑！

使用方法：

1.通過(guò)vue的defineAsyncComponent實(shí)現(xiàn)掛載組件

2.component中的is屬性

父組件：

<template><div><div v-for="item in person.data" :key="item" @click="btn(item)">{{ item.name }}</div><h1>下面為動(dòng)態(tài)組件</h1><component :is="person.componen"> </component></div>
</template><script setup>
import { reactive, onMounted, defineAsyncComponent } from "vue";
const One = defineAsyncComponent(() => import("./One.vue"));
const Two = defineAsyncComponent(() => import("./Two.vue"));const person = reactive({componen: "",data: [{ type: "one", name: "顯示組件一" },{ type: "two", name: "顯示組件二" },],
});
function btn(item) {if (item.type == "one") person.componen = One;if (item.type == "two") person.componen = Two;
}onMounted(() => {});
</script>

子組件：

<template><div>組件一</div><el-input v-model="person.input"></el-input>
</template><script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";const person = reactive({ input: "" });
onMounted(() => {console.log("組件一");
});
</script>
<style scoped lang='less'>
</style>

效果：

這里會(huì)有警告：Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. （Vue收到一個(gè)組件，該組件被設(shè)置為反應(yīng)對(duì)象。這可能會(huì)導(dǎo)致不必要的性能開(kāi)銷(xiāo)，應(yīng)該通過(guò)用“markRaw”標(biāo)記組件或使用“shallowRef”而不是“ref”來(lái)避免。）

????????

解決方法：

1.使用shallowRef替換響應(yīng)式

<template><div><div v-for="item in person.data" :key="item" @click="btn(item)">{{ item.name }}</div><h1>下面為動(dòng)態(tài)組件</h1><keep-alive><component :is="componen"> </component></keep-alive></div>
</template><script setup>
import { reactive, onMounted, defineAsyncComponent, shallowRef } from "vue";
let componen = shallowRef(null);
const Two = defineAsyncComponent(() => import("./Two.vue"));
const One = defineAsyncComponent(() => import("./One.vue"));
let obj = shallowRef({Two,One,
});
const person = reactive({data: [{ type: "one", name: "顯示組件一" },{ type: "two", name: "顯示組件二" },],
});
function btn(item) {if (item.type == "one") componen.value = obj.value.One;if (item.type == "two") componen.value = obj.value.Two;
}onMounted(() => {});
</script>
<style scoped lang='less'>
</style>