完美实现vue3异步加载组件

经过几个小时的努力,终于实现了,根据组件名异常加载组件,直接上代码,网上的很多代码方都有坑,先贴出比较坑的代码:

<template>
	<view class="main">		
		<view class="tops">
			<view class="info">
				<view class="item">
					<view class="tit">姓名:</view>
					<view class="txt">{{qyUser.name}}</view>
				</view>
								
			</view>
		</view>
		<view>
		<component :is="dycomp" v-if="isShow"></component>
		</view>
	</view>
</template>
<script setup>
import {  ref, defineAsyncComponent,markRaw } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import api from '../../api/api.js';
const qyUser = ref({});
//markRaw方法将组件对象标记为非响应式对象
//shallowRef代替ref来创建一个浅响应式对象
const dycomp = ref(null);
const isShow = ref(false);
onLoad(()=>{
	geQyUserInfo();
	loadAsyncComponent("mdIndex");	
});
const loadAsyncComponent = (componentName)=>{
	console.log(componentName);
	dycomp.value = defineAsyncComponent(() =>{
	  import("../components/"+componentName+".vue");
	  }
	);
	isShow.value = true;
	
}
const geQyUserInfo = ()=>{
		console.log(uni.getStorageSync("qyuserid"));
		api.geQyUserInfo({
			"qyuserid":uni.getStorageSync("qyuserid"),
		},(res)=>{
				qyUser.value = res.data.qyUser;	
		});
}
</script>
<style lang="scss" scoped>
	.main {
		background-color: #f5f6f8;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;

		.tops {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 10rpx;

			.title {
				margin-bottom: 25rpx;
				border-left: 6rpx solid #1296db;
				padding-left: 10rpx;
			}

			.info {

				.item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-bottom: 10rpx;

					.tit {
						flex: 1;
						color: #666;
					}

					.txt {
						flex: 4;
					}
				}
			}
		}
	}
</style>

最后优化后成功异步加载组件的代码:

<template>
	<view class="main">		
		<view class="tops">
			<view class="info">
				<view class="item">
					<view class="tit">姓名:</view>
					<view class="txt">{{qyUser.name}}</view>
				</view>
								
			</view>
		</view>
		<view>
		<component :is="dycomp" v-if="isShow"></component>
		</view>
	</view>
</template>
<script setup>
import {  ref, defineAsyncComponent,markRaw,shallowRef } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import api from '../../api/api.js';
const qyUser = ref({});
//markRaw方法将组件对象标记为非响应式对象
//shallowRef代替ref来创建一个浅响应式对象
const dycomp = shallowRef(null);
const isShow = ref(false);
onLoad(()=>{
	geQyUserInfo();
		
});
const loadAsyncComponent = (componentName)=>{
	console.log(componentName);
	dycomp.value = defineAsyncComponent({
		  loader: () => import("../../components/"+componentName+".vue"),
		  delay: 200,
		  timeout: 3000
		}
	);
	isShow.value = true;
	
}
const geQyUserInfo = ()=>{
		api.geQyUserInfo({
			"qyuserid":uni.getStorageSync("qyuserid"),
		},(res)=>{
				qyUser.value = res.data.qyUser;
				loadAsyncComponent("mdIndex");
		});
}
</script>
<style lang="scss" scoped>
	.main {
		background-color: #f5f6f8;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;

		.tops {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 10rpx;

			.title {
				margin-bottom: 25rpx;
				border-left: 6rpx solid #1296db;
				padding-left: 10rpx;
			}

			.info {

				.item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-bottom: 10rpx;

					.tit {
						flex: 1;
						color: #666;
					}

					.txt {
						flex: 4;
					}
				}
			}
		}
	}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/608183.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python运维之多进程!!

本节的快速导航目录如下喔&#xff01;&#xff01;&#xff01; 一、创建进程的类Process 二、进程并发控制之Semaphore 三、进程同步之Lock 四、进程同步之Event 五、进程优先队列Queue 六、多进程之进程池Pool 七、多进程之数据交换Pipe 一、创建进程的类Process mu…

5.9gunplot绘图堆叠柱状图

gunplot绘图堆叠柱状图 plot"要用的数据&#xff08;后缀名是.dat)" using 2 t(或者title) 跟着是要命名的属性名称 这个名称可以用.dat里的每列列名&#xff0c;也可以直接在后面跟着定义 plot "data.dat" using 2 t columnheader(2), using 3 t column…

PLC数据采集网关的功能和特点-天拓四方

一、引言 随着工业自动化程度的不断提高&#xff0c;数据在生产线上的作用愈发重要。PLC作为工业自动化的核心设备&#xff0c;其数据采集和处理能力直接影响到整个生产线的效率和稳定性。而PLC数据采集网关&#xff0c;作为连接PLC与外部系统的桥梁&#xff0c;正日益受到人们…

vue3—win7搭建vue3环境

背景 vue3环境要求node.js18.3及以上版本&#xff0c;所以我们需要安装更高版本node.js&#xff0c;然而win7无法支持高版本node.js。下面我介绍一种安装方法。 步骤 1、下载 node-v13.14.0-x64.msi 安装&#xff0c;默认安装即可。安装完成后&#xff0c;进入cmd&#xff0c…

Hibernate认识

一、定义 Hibernate 是一种开源的 Java 对象关系映射 (ORM) 框架&#xff0c;用于将面向对象的领域模型持久化到关系数据库中。它为开发人员提供了一种简便的方法来操作数据库&#xff0c;而无需编写繁琐的 SQL 代码。 ORM&#xff08;对象关系映射&#xff09;&#xff1a;Ob…

Linux 第二十章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

提速25倍!MoonBit 新增后端支持,一周内成为热议焦点

MoonBit 新增 JS 后端支持 近期&#xff0c;MoonBit 迎来了重要更新&#xff1a;新增对 JavaScript 后端的支持&#xff0c;为用户带来了前所未有的性能提升。 MoonBit 诞生于2022年&#xff0c;是专为云计算及边缘计算设计的 AI 云原生编程语言及开发者平台。作为一门诞生于 …

Orange3数据可视化(小提琴图)

小提琴图 小提琴图和箱线图类似&#xff0c;用来显示数据分布和概率密度。结合了箱线图和密度图的特征&#xff0c;用来显示数据的分布形状。 输入 数据: 输入数据集 输出 选中的数据: 从图中选中的实例 数据: 增加了一列&#xff0c;显示数据点是否被选中 …

STM32--4G DTU 及 阿里云

模块概述 ATK-IDM750C/IDM751C 是正点原子(ALIENTEK)团队开发的一款高性能 4G Cat1 DTU 产品&#xff0c; 支持移动 4G、联通 4G 和电信 4G 手机卡。它以高速率、低延迟和无线数传作为核心功能&#xff0c; 可快速解决应用场景下的无线数传方案。 它支持 TCP/UDP/HTTP/MQTT/DN…

酷开科技AI技术支持,酷开系统根据你的喜好量身定制节目

在当今数字化时代&#xff0c;个性化推荐已成为提升消费者体验的关键因素。酷开科技的智慧AI&#xff0c;为消费者提供了精彩的内容推荐服务&#xff0c;更大地丰富了消费者的娱乐生活。 酷开系统中的AI推荐引擎通过学习消费者的观看习惯和偏好&#xff0c;能够快速识别其兴趣…

Python进行excel处理-01

最近干采购&#xff0c;每个月要对供应商的对账单&#xff0c;对对应的采购订单号和物料编号的价格和数量&#xff0c;是不是和物料管控总表里面的价格数量是不是一致&#xff0c;于是写了一个代码。 从总表里面找到&#xff0c;对账单里对应采购订单和物料编码的数据&#xf…

ACPI高级配置和电源接口规范概览

安全之安全(security)博客目录导读 目录 1 Overview 背景 What is ACPI ACPI初始化 2 Introduction 主要目标 Power management 基本原理 ACPI框架 Target Audience 3 术语 通用术语General ACPI Terminology 全局系统状态定义Global System State Definitions 设…

【全开源】JAVA智慧养老养老护理帮忙代办陪诊陪护小程序APP源码

一、特色功能 护理服务功能&#xff1a; 基础护理&#xff1a;提供日常生活中的基础护理服务&#xff0c;如洗漱、穿衣、进食等&#xff0c;用户可以通过小程序预约&#xff0c;由专业的护理人员上门提供服务。康复护理&#xff1a;针对术后康复或慢性病康复的老年人&#xf…

Ansys Mechanical|内嵌nCode疲劳仿真工具

疲劳分析是分析结构受到周期性载荷作用下&#xff0c;结构应力远小于强度极限情况&#xff0c;甚至结构应力比弹性极限还低的情况下就可能发生破坏的情况。Ansys nCode是国际著名的疲劳耐久性仿真分析软件&#xff0c;其多个版本以前已经可以和Ansys Mechanical进行无缝以进行联…

如果你这样使用电路仿真软件,你就无敌了!

在电子设计领域&#xff0c;电路仿真软件如同一把锋利的宝剑&#xff0c;掌握它&#xff0c;你就能在复杂的电子世界中游刃有余。今天&#xff0c;就让我们一起探讨如何高效利用电路仿真软件&#xff0c;让你在电子设计领域所向披靡&#xff01; 一、熟悉软件界面与基础操作 …

Java文件与IO操作

1. 文件与IO操作 1.1 文件 什么是文件: 文件,对我们并不陌生,文件是保存数据的地方,比如大家经常使用的word文档,txt文件.excel文件...都是文件。它既可以保存一张图片,也可以保持视频,声音.… 1.1.1 文件流: 1.1.2 常用的文件操作: 创建文件对象相关构造器和方法: 案例&a…

从C向C++16——常见容器2

一.stack容器 1.stack理解 概念&#xff1a; stack是一种先进后出的数据结构&#xff0c;它只有一个出口。 它在C中也叫栈&#xff0c;类似于我们在《数据结构和算法》里面的栈&#xff0c;只不过在C中把其封装成库&#xff0c;我们可以直接使用。 注意&#xff1a;栈中只有…

【因特网中自治系统内部的路由选择,RIP 进程处理 OSPFOSPF(Open Shortest Path First)最短路径优先协议】

文章目录 因特网中自治系统内部的路由选择RIP&#xff08;Routing Information Protocol&#xff09;内部网关协议RIP通告&#xff08;advertisements&#xff09;RIP: 链路失效和恢复RIP 进程处理OSPF(Open Shortest Path First)最短路径优先协议OSPF “高级” 特性(在RIP中的…

C++ 继承篇

面向对象语言的三大特性&#xff1a;封装&#xff0c;继承和多态 根据目前学到的知识&#xff0c;对于封装的理解&#xff0c;大致有两层&#xff1a; 将数据和方法封装&#xff0c;不想让外面看到用private/protected修饰&#xff0c;想让外面看到用public修饰类型的行为不满…
最新文章