Vue3动态组件使用例子，解决Vue received a Component which was made a reactive object.

爱被打了一巴掌 2023-10-10 18:20 6阅读 0赞

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

效果：

![bd20052921b24ec49056284c88751a4c.png][]

[bd20052921b24ec49056284c88751a4c.png]: https://img-blog.csdnimg.cn/bd20052921b24ec49056284c88751a4c.png