当前位置: 首页 > 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; …...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...