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渲染失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇vue2.0模拟锚点的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了ant design pro中可控的筛选和排序实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了Vue框架和前后端开发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能，这篇文章主要介绍了vue3中hooks的简介及用法,需要的朋友可以参考下2023-01-01
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
这篇文章主要介绍了vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
本文主要介绍了vue3实现问卷调查的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
相信大部分Vue开发者都使用过vue-cli来构建项目,它的确很方便,但对于很多初级开发者来说,还是要踩不少坑的,下面这篇文章主要给大家介绍了关于使用vue-cli创建vue2项目的实战步骤,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下2019-04-04
这篇文章主要为大家介绍了vue 支持百万量级的无限滚动组件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决)
这篇文章主要介绍了npm install -g @vue/cli安装vue脚手架报错问题(一般都能解决),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论