Vue3动态组件component不生效问题解决方法

更新时间：2024年08月29日 09:49:34 作者：技术钱

动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件,在Vue3中使用方法和Vue2基本一致,在vue3使用component动态组件展示组件时,组件就是不展示显示空白,所以本文记录了Vue3动态组件component不生效问题解决方法,需要的朋友可以参考下

问题： vue3循环渲染动态组件component不生效，页面空白

在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法踩了很多坑，所以记录下：

  <div class="preview-list" id="canvas-area">
    <component
      v-for="component in components" 
      :key="component.id"
      :is="component.name"
      v-bind="component.props" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
</script>

因为vue3使用的是setup语法，组件只要import导入就行不需要再像vue2中在components挂载，这样导致我想渲染的组件是没有渲染出来页面出现空白，尝试了很多办法对应的组件里面添加多个script指定对应的组件名，还是没生效

解决方法

使用shallowReactive或者shallowRef把对应的组件名称重新定义下，遍历component时，is采用对象key获取对应的对应的组件，这样组件就显示出来了

  <div class="preview-list" id="canvas-area">
    <component
      v-for="component in components" 
      :key="component.id"
      :is="componentsName[component.name]"
      v-bind="component.props" 
      />
  </div>
<script setup lang="ts">
import LText from '@/components/LText'
import { ref, shallowReactive } from 'vue'
interface styleProps = {
   text: string;
   fontSize: string;
}
interface componentData = {
  id: number;
  name: string;
  props?: styleProps;
}
type componentName = {
  [key: string]: any
}
const components = ref<componentData[]>([
    { id: 1, name: 'LText', props: { text: 'hello', fontSize: '12px'}},
    { id: 2, name: 'LText', props: { text: 'hello2', fontSize: '14px'}},
    { id: 3, name: 'LText', props: { text: 'hello3', fontSize: '16px'}}
])
// 解决方案
const componentsName = shallowReactive<componentName>({
  LText
})

</script>

拓展：Vue3使用动态组件 Component

一、动态组件的概念

多个组件通过component标签挂载在同一个组件中，通过触发动作进行动态切换，常搭配<keep-alive></keep-alive>使用。

二、使用场景

多用于以下几个场景：

1、tab栏的切换

管理系统中切换不同的菜单，展示tab，切换tab可以渲染不同组件，一般搭配<keep-alive></keep-alive>使用。

2、条件性地渲染组件

根据某个条件决定渲染哪个组件。通过在<component>元素上使用v-if指令来实现。

3、动态切换组件

根据用户的交互或状态变化，切换显示不同的组件。通过在<component>元素上使用is属性来指定要渲染的组件。

4、异步加载组件

当组件非常大或需要懒加载时，可以使用动态组件来异步加载组件，从而提高页面加载速度。

5、与路由结合使用

在路由配置中使用动态组件，根据不同的路由路径加载相应的组件。

三、使用示例

1、挂载组件

通过vue的defineAsyncComponent实现挂载组件

const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));

2、component的is属性

<component :is="item.component" />

3、动态组件传值

动态组件的传值遵循基本组件传值规则，除了支持v-bind传值以外，还支持ref引用传值；使用引用传值需要注意的是，需要确定组件之后，再使用ref属性进行传值，否则将会无法获取应用组件的属性。使用v-bind传值代码如下所示：

<template>
    <div>
        <component :is="item.component" :data="reportData" :exam-data="exampData"/>
    </div>
</template>
<script lang="ts" setup>
const CourseData = defineAsyncComponent(() => import("@/components/Chart/courseData.vue"));
const item = reactive({
    component: CourseData
})
 
const reportData = ref("aaaaa")
const exampData = ref("bbbb")
</script>

4、动态组件数据缓存

若是数据需要动态渲染，组件切换之后会导致之前获得的数据丢失，这个时候，若我们想要在组件切换过程中保持这些组件的状态，避免重复渲染导致性能问题，则可以使用<keep-alive></keep-alive>包裹动态组件，来缓存组件中的数据：

<template>
  <div>
    <div id="dynamic-component-demo" class="demo">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
      <keep-alive>
        <component
          :is="item.component"
          class="tab"
        ></component>
      </keep-alive>
    </div>
  </div>
</template>

到此这篇关于Vue3动态组件component不生效问题解决方法的文章就介绍到这了,更多相关Vue3 component不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3通过父子传值实现弹框功能
在Vue3中,我们可以通过 provide 和 inject 来实现父子组件之间的数据传递,这也适用于实现弹框功能,下面我们就来学习一下vue3实现弹框功能的具体方法吧
2023-12-12
vue中router.beforeEach()的简单用法举例
router.beforeEach()一般用来做一些进入页面的限制,比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面,下面这篇文章主要给大家介绍了关于vue中router.beforeEach()的简单用法举例,需要的朋友可以参考下
2023-01-01
Vue使用<Suspense/>实现图片加载组件
Suspense是Vue的内置组件,用于管理异步组件的加载状态,包括等待、出错和最终渲染,它通过两个插槽（default和fallback）来实现这一功能,感兴趣的可以了解一下
2026-01-01
浅谈Vue render函数在ElementUi中的应用
今天小编就为大家分享一篇浅谈Vue render函数在ElementUi中的应用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue项目路由刷新的实现代码
这篇文章主要介绍了Vue项目路由刷新的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
Vue3如何解决路由缓存问题(响应路由参数的变化)
这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue仿ios列表左划删除
这篇文章主要为大家详细介绍了vue仿ios列表左划删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
vue3项目中eslint+prettier统一代码风格方式
这篇文章主要介绍了vue3项目中eslint+prettier统一代码风格方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
深入了解Vue.js 混入（mixins）
这篇文章主要介绍了Vue.js 混入的相关资料，文中讲解非常细致，示例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
Vue.js组件tree实现省市多级联动
这篇文章主要为大家详细介绍了Vue.js组件tree实现省市多级联动的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12