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不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
这篇文章主要介绍了Vue使用路由钩子拦截器beforeEach和afterEach监听路由,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
在移动端使用vue-router和keep-alive的方法示例
这篇文章主要介绍了在移动端使用vue-router和keep-alive的方法示例，vue-router与keep-alive提供的路由体验与移动端是有一定差别的，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要为大家详细介绍了Vue3如何结合Vite4对项目进行性能优化的相关配置,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
今天小编就为大家分享一篇vue 使用鼠标滚动加载数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了VUE项目实现全屏显示功能之screenfull用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue中radio根据动态值绑定checked无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue仿element实现分页器效果，实现思路是定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2)，具体实例代码大家参考下本文2018-09-09
这篇文章主要介绍了利用Vue通过自定义指令实现内容替换的方法,通过Vue.directive指令定义函数来实现内容自定义,通过指令定义函数的三个钩子函数（inserted、componentUpdated、unbind）来实现自定义内容的挂载、更新和销毁,需要的朋友可以参考下2025-03-03
最新评论