Vue3动态组件component不收效问题办理方法

2024-11-2 22:43| 发布者: c2688| 查看: 37| 评论: 0

摘要: 目录问题： vue3循环渲染动态组件component不收效，页面空白办理方法拓展：Vue3使用动态组件 Component一、动态组件的概念二、使用场景三、使用示例问题： vue3循环渲染动态组件component不收效，页面空白

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

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

[code] <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> [/code]

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

办理方法

使用shallowReactive大概shallowRef把对应的组件名称重新定义下，遍历component时，is接纳对象key获取对应的对应的组件，这样组件就表现出来了

[code] <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> [/code]

拓展：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实现挂载组件

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

2、component的is属性

[code]<component :is="item.component" />[/code]

3、动态组件传值

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

[code]<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>[/code]

4、动态组件数据缓存

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

[code]<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>[/code]

到此这篇关于Vue3动态组件component不收效问题办理方法的文章就先容到这了,更多相关Vue3 component不收效内容请搜索脚本之家从前的文章或继续欣赏下面的相关文章盼望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/3266636nm.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：使用Vue3-Ace-Editor如安在Vue3项目中集成代码编辑器下一篇：vue3实现alert自界说的plugins方式

账号		自动登录	找回密码
密码			立即注册