问题: 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>