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-cli中模拟数据的两种方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue组件通信传值操作,结合实例形式分析了vue.js父子组件通信及兄弟组件通信相关操作技巧,需要的朋友可以参考下2019-01-01
vue element-plus中el-input修改边框border的方法
element样式还是蛮好的,只是有时候我们需要做一些调整,比如el-input的边框,下面这篇文章主要给大家介绍了关于vue element-plus中el-input修改边框border的相关资料,需要的朋友可以参考下2022-09-09
Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue2中如何自定义组件的v-model，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue+elementUI实现动态合并数据相同的单元格(可指定合并列)
这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇基于axios 的responseType类型的设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了Vue实现商品飞入购物车效果(电商项目)，这种效果在一些电商平台经常会用到，今天小编通过代码详解,需要的朋友可以参考下2019-11-11
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
这篇文章主要介绍了Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
最新评论