vue3 component is 不显示的问题及解决

更新时间：2024年03月15日 09:31:55 作者：MAIMIHO

这篇文章主要介绍了vue3 component is 不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 component is 不显示

原因

通过名称传递必须先对其进行注册, 将组件本身传递给 is 而不是其名称，则不需要注册

<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>

setup 写法

<script setup>    
    import TestOne from './components/TestOne.vue'    
    import TestTwo from './components/TestTwo.vue'    

    const tabs = [TestTwo, TestOne];    
    const title = 'Hello';    
</script>

或者

<script setup>    
    const tabs = [TestTwo, TestOne];    
    const title = 'Hello';    
</script>  
<script>    
    import TestOne from './components/TestOne.vue'    
    import TestTwo from './components/TestTwo.vue'    

    export default {    
        components: {    
            TestOne,    
            TestTwo    
        }  
    }    
</script>

vue动态组件component:is的使用？

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<component :is="componentTag"></component>
data() {
    return {
        componentTag: '',
    }
}

componentTag 为自定义的变量，将需要加载的组件名赋值给它，即可在<component />标签出现的位置，渲染该组件。

这个是vue的组件，is=要渲染的组件，不会更新路由，不会更新初始化函数mounted和created。

刷新页面后会跳回默认显示页面；

缺点

需要引入所有要显示的组件，并且components:{声明}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中动态修改img标签中src的方法实践
本文主要介绍了vue中动态修改img标签中src的方法实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
这篇文章主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码，也是小编踩了无数坑总结出来的经验,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
vue中同步方法的实现
这篇文章主要介绍了vue中同步方法的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
详解vue中的动态组件component和keep-alive
这篇文章主要介绍了详解vue中的动态组件component和keep-alive的相关资料,这大家需要注意include属性和exclude属性只能用一个,不能同时使用,本文给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11
Vue3中如何使用fullcalendar日历插件
这篇文章主要介绍了Vue3中如何使用fullcalendar日历插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
vue data中如何获取使用store中的变量
这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue 非常实用的自定义指令分享
这篇文章主要介绍了Vue 非常实用的自定义指令分享，Vue自定义指令有全局注册和局部注册两种方式，在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令，下文小编给大家分享那些常用到的Vue自定义指令
2022-02-02
Vue SPA单页面的应用和对比
单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用
2022-08-08
vue使用Canvas在画布上添加图片方式
这篇文章主要介绍了vue使用Canvas在画布上添加图片方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue实现信息管理系统
这篇文章主要为大家详细介绍了vue实现信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05