Vue3动态组件<component>渲染失效原因分析
更新时间：2024年11月01日 11:17:33 作者：小达不刘
在vue2中使用正常,但是迁移到Vue3中,发现组件无法渲染, 本文给大家分别展示Vue2和Vue3的代码,组件能正常在Vue2中渲染,在Vue确没有渲染出来,并通过代码示例给出了解决方法,需要的朋友可以参考下
在Vue2中伪代码如下：
<template>
<component
:is="currentActiveTab.component"
ref="componentRef"
:key="currentActiveTab.key"
:current-active-tab="currentActiveTab"
v-bind="currentActiveTab"
/>
</template>
<script>
import A from './components/A'
import B from './components/B'
import C from './components/C'
export default {
components: {
A,
B,
C
},
data() {
return {
tabList: [
{
name: '概览视图',
key: 'all',
component: 'OverviewGraph'
}
],
activetab: 'all',
}
},
computed: {
currentActiveTab() {
return this.tabList.find((v) => v.key === this.activetab)
}
}
}
</script>
迁移到Vue3中代码如下：
<template>
<component
:is="currentActiveTab.component"
ref="componentRef"
:key="currentActiveTab.key"
:current-active-tab="currentActiveTab"
v-bind="currentActiveTab"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
const tabList = ref([
{
name: '概览视图',
key: 'all',
component: 'OverviewGraph'
}
])
const activetab = ref('all')
const currentActiveTab = computed(() => {
return tabList.value.find((v) => v.key === activetab.value)
})
</script>
Vue3渲染出来是酱紫的：
只有一个壳子，没有任何内容。
问题出在组件的名字上了：在 <script setup> 中要使用动态组件时，需要直接用 :is="Component" 直接绑定到组件本身，而不是字符串的组件名。 也就是需要把'OverviewGraph'改成OverviewGraph即可。 修改后的代码如下：
<template>
<component
:is="currentActiveTab.component"
ref="componentRef"
:key="currentActiveTab.key"
:current-active-tab="currentActiveTab"
v-bind="currentActiveTab"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, nextTick } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
const tabList = ref([
{
name: '概览视图',
key: 'all',
component: OverviewGraph // 改了这里
}
])
const activetab = ref('all')
const currentActiveTab = computed(() => {
return tabList.value.find((v) => v.key === activetab.value)
})
</script>
到此这篇关于Vue3动态组件<component>渲染失效原因分析的文章就介绍到这了,更多相关Vue3 component渲染失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue连接本地服务器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2024-01-01
在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求，本文主要介绍了vue+ts大文件切片上传，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了Vue自定义全局弹窗组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了vue中v-model指令与.sync修饰符的区别详解，详细的介绍了两个的用法和区别，感兴趣的可以了解一下2021-08-08
这篇文章主要给大家介绍了关于vue实现tab切换的3种方式及切换保持数据状态的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了Vue实现调用PC端摄像头实时拍照，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家通过示例解析Ant Design Vue组件slots作用，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本文是小编给大家收藏整理的关于vue项目前端知识点，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最新评论