当前位置: 首页 > news >正文

vue3动态加载组件

如何在Vue3中动态加载组件

需求根据下拉框的值,加载不同的组件
新建文件aaa.vue,bbb.vue

<template><div class="container">我是bbbb组件</div>
</template><script lang="ts" setup name="taskPush">
</script>
<style scoped lang="less">
</style>

aaa组件

<template><div class="container">我是aaa组件</div>
</template><script lang="ts" setup name="taskPush">
</script>
<style scoped lang="less">
</style>

新建.ts文件

import { shallowRef } from 'vue';
export default function () {const asyncComponent: any = shallowRef({}); //渲染的表单组件(异步加载)/*** 获取calssify下的某一个组件* @param moduleName 组件名称*/const getFormComponents = (moduleName: string) => {import(`./${moduleName}.vue`).then((module: any) => {asyncComponent.value = module.default;});};return {getFormComponents,asyncComponent};
}

在父组件中使用

<template><div class="container"><el-selectv-model="value"placeholder="Select"size="large"style="width: 240px"@change='changeCom'><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><component:is="asyncComponent"ref="componentRef"></component></div>
</template><script lang="ts" setup >
import { ref } from 'vue'
import getModuleList from "./getModuleList";
const { getFormComponents, asyncComponent } = getModuleList();
const value = ref('')const options = [{value: 'aaa',label: '组件',},{value: 'bbb',label: '组件bbb',},
]
const changeCom = (e:any)=>{}</script>
<style scoped lang="less">
</style>

相关文章:

vue3动态加载组件

如何在Vue3中动态加载组件 需求根据下拉框的值&#xff0c;加载不同的组件 新建文件aaa.vue&#xff0c;bbb.vue <template><div class"container">我是bbbb组件</div> </template><script lang"ts" setup name"taskPus…...

12.29 redis缓存一致性

更新操作 如果先更新数据库再更新缓存 先更新缓存再更新数据库 更新缓存为1 更新缓存尾2 更新数据库为2 更新数据库为1 那么最后缓存为2 数据库为1 数据不一致 先更新数据库&#xff0c;再更新缓存 数据库为1 数据库为2 缓存为2 缓存为1 还是不一致 于是这种情况我们改为将缓…...

SqlSugar配置连接达梦数据库集群

安装达梦数据库时&#xff0c;会自动在当前操作系统中创建dm_svc.conf文件&#xff0c;可以在其中配置集群信息&#xff0c;不同操作系统下的文件位置如下图所示&#xff1a;   dm_svc.conf文件内的数据分为全局配置区域、服务配置区域&#xff0c;以参考文献1中的示例说明&…...

评分模型在路网通勤习惯分析中的应用——提出问题(1)

1、问题的由来、目标和意义 最近一段时间和公司其它业务部门讨论时&#xff0c;发现一个有趣的交通路网问题&#xff0c;车辆从S点行驶到V点共用时40分钟&#xff0c;这段时间内路网中的卡口摄像头识别到了车辆通过的信息。如下图所示&#xff1a; 设计师需要通过这些有限的路…...

使用 OpenCV 绘制线条和矩形

OpenCV 是一个功能强大的计算机视觉库&#xff0c;它不仅提供了丰富的图像处理功能&#xff0c;还支持图像的绘制。绘制简单的几何图形&#xff08;如线条和矩形&#xff09;是 OpenCV 中常见的操作。在本篇文章中&#xff0c;我们将介绍如何使用 OpenCV 在图像上绘制线条和矩形…...

npm 切换镜像源

设置镜像源 npm config set registry https://mirrors.huaweicloud.com/repository/npm/ npm 官方原始镜像网址是&#xff1a;https://registry.npmjs.org/ 淘宝 NPM 镜像&#xff1a;https://registry.npm.taobao.org 阿里云 NPM 镜像&#xff1a;https://npm.aliyun.com 腾…...

CSS(四)display和float

display display 属性用于控制元素的显示类型&#xff0c;用的 display 值包括&#xff1a; block&#xff1a;块级元素 使元素成为块级元素&#xff0c;占据一整行&#xff0c;前后有换行宽度默认为父容器的 100%&#xff0c;可以设置宽高&#xff0c;支持 margin、padding、…...

MMaudio AI:如何通过 AI 实现精准的视频到音频合成

1. 引言&#xff1a;视频音效制作的新纪元 无论是短视频创作者还是电影后期制作团队&#xff0c;音效始终是提升作品质量的关键。然而&#xff0c;手动调整音效不仅耗时&#xff0c;还容易出错。试想&#xff0c;如果一项 AI 技术能够根据视频内容自动生成与画面完美同步的音效…...

SQL进阶技巧:如何分析双重职务问题?

目录 0 背景描述 1 数据准备 2 问题分析 方法2:利用substr函数,充分利用数据特点【优秀解法】 3 小结...

OpenCV相机标定与3D重建(37)计算两幅图像之间单应性矩阵(Homography Matrix)的函数findHomography()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到两个平面之间的透视变换。 cv::findHomography 是 OpenCV 库中用于计算两幅图像之间单应性矩阵&#xff08;Homography Matrix&#xff09;的…...

Nacos配置管理+共享配置、配置热更新

1. 什么是配置管理? Nacos 配置管理是一个集中管理配置的工具。 它把微服务的配置集中存放&#xff0c;方便管理。可以动态更新配置&#xff0c;配置变了&#xff0c;微服务能马上知道并更新&#xff0c;不用重启。还能进行版本控制&#xff0c;记录配置的历史版本方便回滚。…...

asp.net core系统记录当前在线人数

实时记录当前在线人数&#xff0c;登录后保持120秒在线状态&#xff0c;在线状态保存在缓存中&#xff0c;采用滑动过期&#xff0c;在120秒内请求了系统&#xff0c;自动续活120秒&#xff1b;超过时间则移除用户在线状态&#xff1b; 需要在登录过滤器标记用户在线状态需要排…...

秒杀场景的设计思考

秒杀场景的设计思考 在学习Redis的之后&#xff0c;一个绕不开的话题就是秒杀系统的设计。本文将从下面&#x1f447;&#x1f3fb;几个方面展开一下个人简单的理解&#xff1a; 秒杀场景的介绍设计的核心思路怎么限流、削峰、异步planB总结 ‍ 秒杀场景的介绍 秒杀场景是…...

快速掌握Haproxy原理架构

文章目录 一、原理架构二、无负载均衡三、四层负载均衡的工作流程四、七层负载均衡工作流程五、基础属性mode 属性retries 属性maxconn 属性clitimeout 属性servtimeout 属性states uri 属性 一、原理架构 四层tcp代理&#xff1a;Haproxy仅在客户端和服务器之间双向转发流量&…...

基于Centos7.X系统端口占用处理

1、查看当前端口占用情况 使用 netstat 查看系统中占用的端口和相关的进程。 netstat -tuln 或者 ss -tnl 选项解释&#xff1a; -t 显示 TCP 连接-u 显示 UDP 连接-l 显示监听的端口-n 以数字形式显示端口号和 IP 2、具体进程的pid netstat -anp | grep <port_numb…...

MySQL的索引失效的原因有那些

1. 数据类型不匹配 详细说明&#xff1a;MySQL在比较不同数据类型的值时&#xff0c;可能会尝试进行隐式转换。如果这种转换导致了复杂度增加或无法直接利用索引&#xff0c;则会导致索引失效。 实例与解决方案&#xff1a; -- 错误示例&#xff1a;数据类型不匹配 select *…...

Java重要面试名词整理(十):Kafka

文章目录 Kafka简介相关概念Kraft集群 Kafka收发消息梳理客户端工作机制消费者分组消费机制生产者拦截器机制消息序列化机制消息分区路由机制生产者消息缓存机制发送应答机制生产者消息幂等性生产者消息事务 Kafka集群架构设计-Kafka的Zookeeper元数据梳理Leader Partition选举…...

内置ALC的前置放大器D2538A/D3308

一、概述 D2538A/D3308是芯谷科技推出的带有ALC&#xff08;自动电平控制&#xff09;的前置音频放大器芯片&#xff0c;最初产品为单声道/立体声收录机及盒式录音机而开发&#xff0c;作为录音/回放的磁头放大器使用&#xff1b;由于产品的高增益、低噪声及ALC外部可调的特性&…...

04-微服务02

我们将黑马商城拆分为5个微服务&#xff1a; 用户服务 商品服务 购物车服务 交易服务 支付服务 由于每个微服务都有不同的地址或端口&#xff0c;相信大家在与前端联调的时候发现了一些问题&#xff1a; 请求不同数据时要访问不同的入口&#xff0c;需要维护多个入口地址…...

Java中的this关键字详解:深入理解与应用

目录 一、this关键字的基本概念 二、this指代当前对象 示例&#xff1a; 三、this区分成员变量与方法参数 示例&#xff1a; 四、使用this()调用构造方法 示例&#xff1a; 五、使用this传递当前对象 示例&#xff1a; 六、this的其他注意事项输出结果&#xff1a; …...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...