使用vue3动态组件的时候,需要使用shallowRef进行包裹组件id,用于动态切换组件,不然会报错误:App.vue:12 [Vue warn]: Vue received a Component which 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`.
先创建三个小组件,然后在父组件里面引入,三个小组件的代码如下
First组件:
<template>
<div style="height: 300px; width:500px">欢迎来到动态组件First
</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
Second组件:
<template>
<div style="height: 300px; width:500px">你知道西游记是哪一年的吗Seond</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
Three组件:
<template>
<div style="height: 300px; width:500px">你知道英雄联盟吗Three</div>
</template>
<script setup lang="ts">
</script>
<style scoped></style>
父组件:
<template>
<div>
<div style="margin: 10px;">动态组件使用例子</div>
<button
v-for="(item, index) in componentData"
@click="switchComp(item.comp)"
:key="index"
style="margin-right: 10px; border: 1px solid black; padding: 5px"
>
{{ item.name }}
</button>
<component :is="compId"></component>
</div>
</template>
<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import FirstVue from './components/FirstVue.vue'
import SecondVue from './components/SecondVue.vue'
import ThreeVue from './components/ThreeVue.vue'
let compId = shallowRef(FirstVue)
// let compId = ref(FirstVue)
const componentData = [
{
name: 'first',
comp: FirstVue
},
{
name: 'second',
comp: SecondVue
},
{
name: 'three',
comp: ThreeVue
}
]
const switchComp = (comp)=>{
compId.value = comp
}
</script>
<style scoped></style>
效果: