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

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Windows安装Miniconda

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

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...