首页 > 其他分享 >使用defineAsyncComponent解决Vue3中的动态组件不显示问题

使用defineAsyncComponent解决Vue3中的动态组件不显示问题

时间:2024-02-25 22:33:39浏览次数:21  
标签:www cn defineAsyncComponent Vue3 组件 动态

参考: https://www.php.cn/faq/562208.html

之前的写法

<component :is='xxx'></component>

异步加载组件

<template>
   <AsyncComponent v-if="item.data" :key="item.data.comId"></AsyncComponent>
</template>

<script setup>
  const AsyncComponent = defineAsyncComponent(() => {
    return import ('@/components/DynamicComponents/DynamicCom01.vue')
  })
</script>

标签:www,cn,defineAsyncComponent,Vue3,组件,动态
From: https://www.cnblogs.com/openmind-ink/p/18033251

相关文章

  • Vue3学习(十八) - TreeSelect 树选择
    写在前面本以为可以在家学习一天,结果家里来了客人拜年,就没学习上,有点小遗憾吧。昨天完成从分类管理的前后端代码复制出文档管理的前后端代码,遗留问题是只能选择一级父分类。值得说的是,昨晚的遗留的问题修复了,开心。遗留问题点击父文档,弹出警告,从报错来看那意思就是parent应该......
  • 使用`react-hooks写法`对`antd的Upload.Dragger上传组件`进行二次封装
    使用react-hooks写法对antd的Upload.Dragger上传组件进行二次封装预期对antd的Upload.Dragger组件进行二次封装,让它的使用方法和Upload.Dragger组件保持一致。让该组件能自动把数据放到对应后端服务器中。让该组件能的value值如果没上传,为数组形式。如果没有值,为空数组。如......
  • 【vue3】【router】跳转页面渲染两次问题
    最近做一款毕设遇到一个问题:如图所示部分是因为渲染了两次组件导致执行了两次onMounted加载了相同数据。 router.ts以下是我的路由相关配置: default布局:keepalive App.vue 最后导致这个原因正是因为布局组件default.vue和App.vue同时使用了keepalive,只要任意一边取消......
  • 依赖注入(Dependency Injection, DI)是一种设计模式,例如,在React中,父组件可以通过props向
    依赖注入renderprops其实就是React世界中的“依赖注入”(DependencyInjection)。所谓依赖注入,指的是解决这样一个问题:逻辑A依赖于逻辑B,如果让A直接依赖于B,当然可行,但是A就没法做得通用了。依赖注入就是把B的逻辑以函数形式传递给A,A和B之间只需要对这个函数......
  • 11.Feign组件介入Nacos微服务
    创建三个项目Summerboot.Feign,Summerboot.Client(http://192.168.10.13:5197),NacosService(http://192.168.10.13:5199)注意Summerboot.Client依赖Summerboot.Feign。安装包:SummerBootSummerboot.Client客户端是用来调用Feign组件先添加一个JWT配置类///<summary>///JWT......
  • 若使用的ts,子组件的props是直接解构好呢还是定义一个接口好呢?
    在TypeScript中,定义子组件的props通常有以下两种方式:接口(Interface)://定义一个接口来描述PropsinterfaceMyComponentProps{title:string;items:string[];onItemSelected:(item:string)=>void;}//在子组件中使用该接口constMyComponent:React.FC......
  • 10.Feign组件在NET中的简单使用
    安装包:SummerBootFeign是一种声明式服务调用组件,我们只需要声明一个接口并通过注解进行简单的配置(类似于Dao接口上面的Mapper注解一样)即可实现对HTTP接口的绑定。通过Feign,我们可以像调用本地方法一样来调用远程服务,而完全感觉不到这是在进行远程调用。Feign底层基于h......
  • kkFileView文档在线预览项目在IDEA运行正常正常,打包jar提示找不到office组件,请确认'of
    2024-02-2413:36:58.530WARN17976---[main]ConfigServletWebServerApplicationContext:Exceptionencounteredduringcontextinitialization-cancellingrefreshattempt:org.springframework.beans.factory.BeanCreationException:Errorcreatingbeanwithn......
  • 父子组件渲染销毁过程
    父子组件生命周期执行顺序加载渲染数据过程父组件beforeCreate-->父组件created-->父组件beforeMount-->子组件beforeCreate-->子组件created-->子组件beforeMount-->子组件mounted-->父组件mounted-->更新渲染数据过程父组件beforeUpdate-->子组件......
  • Vue3音乐播放器组件,可显示歌词
    在线体验地址音乐播放器1,安装npminstallapple-music-player或yarnaddapple-music-player2,在main.ts中引入import{createApp}from'vue'importAppfrom'./App.vue'importAppleMusicPlayerfrom'apple-music-player'createApp(App).use(......