完美实现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.mzph.cn/bicheng/9043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【6D位姿估计】FoundationPose 跑通demo 训练记录

前言 本文记录在FoundationPose中&#xff0c;跑通基于CAD模型为输入的demo&#xff0c;输出位姿信息&#xff0c;可视化结果。 然后分享NeRF物体重建部分的训练&#xff0c;以及RGBD图为输入的demo。 1、搭建环境 方案1&#xff1a;基于docker镜像&#xff08;推荐&#xf…

Centos Yum

什么是yum yum&#xff0c;全称为 Yellowdog Updater Modified&#xff0c;是一种基于 RPM 包管理器的开源软件包管理器&#xff0c;主要用于 CentOS、Red Hat Enterprise Linux&#xff08;RHEL&#xff09;和 Fedora 等 Linux 发行版。yum 用来简化软件的安装、更新和管理过…

重置密码之后无法ssh登录

背景描述 我这边有个服务器S&#xff0c;我从ServerA可以ssh上去&#xff0c;但是我从堡垒机B无法ssh上去&#xff1b;一开始以为是密码问题&#xff0c;手动重置密码&#xff0c;但是依然无法登录进去&#xff1b;一直提示密码错误&#xff1b;改了好几次密码都不行 问题原因…

5.9号模拟前端面试10问

5.9号模拟前端面试10问 1.html语义化的理解 HTML语义化是指使用具有明确含义的HTML标签来描述内容&#xff0c;而不仅仅是使用<div>和<span>等通用容器标签。语义化的HTML代码更易于阅读和维护&#xff0c;同时也有助于搜索引擎优化&#xff08;SEO&#xff09;。…

达梦数据库限制用户登录IP测试

达梦数据库创建用户时可以限制登录ip和时间段。 创建测试测试用户 create user test1 identified by Test_1234 ALLOW_IP "192.168.100.101"; 限定该用户只能通过192.168.100.101地址登录数据库 连接测试 上图可见&#xff0c;192.168.100.101客户端可以连接上19…

wish、亚马逊怎么给店铺引流?怎么运用自养号测评提高流量的转化率?

作为全球知名的跨境电商平台&#xff0c;wish、亚马逊为卖家提供了一个拓展海外市场的机会。然而&#xff0c;在wish、亚马逊平台上建立和经营一家成功的店铺需要有效的引流策略。那么&#xff0c;Wish、亚马逊怎样才能给店铺引流呢&#xff1f; 一、Wish、亚马逊怎么给店铺引…

C++学习笔记——仿函数

文章目录 仿函数——思维导图仿函数是什么仿函数的优势理解仿函数仿函数的原理举例 仿函数——思维导图 仿函数是什么 使用对象名调用operator&#xff08;&#xff09;函数看起来像是在使用函数一样&#xff0c;因此便有了仿函数的称呼&#xff1b;仿函数存在的意义是&#x…

李飞奇遇之键盘侠刘一刀

在这个充满挑战和机遇的信息时代&#xff0c;程序员和键盘侠在不同的领域中展现出了他们的智慧和勇敢。他们各自在自己的领域中取得了巨大的成功&#xff0c;但在面对邪恶势力的共同威胁时&#xff0c;他们也展现了超越个人之上的团结和合作精神。在这个充满挑战的时代&#xf…

javaMail快速部署——发邮件喽~

目录 功能阐述 前序步骤 &#xff08;1&#xff09;到QQ邮箱中获取到授权码 代码实现 坑 今天在写一个修改密码的功能的时候要用到邮箱的发送&#xff0c;然后因为这个项目比较老旧了&#xff0c;采用的是javaWeb和jsp的配置&#xff0c;对于我只使用过springBoot整合的ja…

苹果新款 M4 芯片专注于 AI

爆炸性消息&#xff01;苹果的新一代 M4 芯片来了&#xff01;这家伙拥有 38 万亿次操作的超强神经引擎&#xff0c;速度比苹果 A11 芯片的 NPU 快 60 倍&#xff01;虽然它的速度还没有达到 Snapdragon X Elite 的 45 TOPS&#xff0c;但苹果自夸 M4 将提供与最新 PC 芯片相同…

解决后端ID传到前端时被截断,末尾显示00

问题原因&#xff1a; Java后端Long类型的取值和前端Number类型取值范围不一样。 解决方案&#xff1a; 将id字段进行json序列化时转为字符串。 JsonSerialize(using ToStringSerializer.class) private Long id;

带你入门React

目录 前言一&#xff0c;基本配置1.1 环境搭建1.2 页面初始化渲染二&#xff0c;基础学习2.1 结构与样式开发2.2 数据展示2.3 行内样式2.4 条件渲染2.5 列表渲染2.6 点击事件 三&#xff0c;页面更新3.1 组件数据3.2 组件数据共享 总结 前言 笔者之前的工作经验都局限于Vue&am…

ICode国际青少年编程竞赛- Python-2级训练场-for循环中的变量

ICode国际青少年编程竞赛- Python-2级训练场-for循环中的变量 1、 for i in range(4):Dev.turnLeft()# 将i1作为Dev移动的步数Dev.step(i 1)2、 for i in range(4):Spaceship.step(i 1)Dev.step(3)Dev.step(-3)3、 for i in range(5):Dev.step(5 - i)Dev.turnRight()4、 …

开源文档管理系统Paperless-ngx如何在Linux系统运行并发布至公网

文章目录 1. 部署Paperless-ngx2. 本地访问Paperless-ngx3. Linux安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 Paperless-ngx是一个开源的文档管理系统&#xff0c;可以将物理文档转换成可搜索的在线档案&#xff0c;从而减少纸张的使用。它内置…

【JAVA】JAVA中的静态变量、全局变量

【JAVA】JAVA中的静态变量、全局变量 一、静态变量1.1、静态变量的特点和使用方法1.2、静态变量的使用场景1.3、简单的示例&#xff0c;1.4、静态变量作用范围 二、全局变量2.1、静态变量&#xff08;Static Variables&#xff09;&#xff1a;2.2、单例模式中的静态变量 一、静…

【Pytorch】1.读取训练数据集

导入Dataset类 from torch.utils.data import Dataset # 注意是Dataset&#xff08;大写&#xff09;的才是类通过jupyter我们可以阅读一下Dataset类的具体使用方法 help(Dataset) # 或者直接 Dataset??我们可以看到具体对Dataset类的解释 从蓝色字体我们可以得出 所有的代…

QT QUICK 2 : QML与后端C++组建类MVVM结构工程最小化实现

一、采用QT对方法提供的宏进行结构MVVM的构建 1.打开QT &#xff0c;并创建QT-QUICK 工程&#xff0c;建议QT5.15及以上 2.准备 类 MyObject 其实这个类就可以作为VM使用 myobject.h #ifndef MYOBJECT_H #define MYOBJECT_H#include <QObject>class MyObject : publi…

释放创造力,低成本实现您的梦想应用 —— 尽在我们的开源低代码平台!

在数字化时代&#xff0c;每个企业都渴望拥有自己的专属应用&#xff0c;但传统开发模式的高成本和技术壁垒让许多梦想搁浅。现在&#xff0c;我们为您带来了革命性的解决方案 —— 一个开源、免费、且功能强大的低代码开发平台&#xff01; 为什么选择我们的低代码平台&#…

任务修复实例(9)

Quest Name Breaking the Chain | 斩断链条 Quest ID 25167 -- Delete Creature Spawned DELETE FROM world.creature WHERE id IN (39251,39245,39249); -- Adjust Creature States UPDATE world.creature_template SET npcflag 16777216, AIName SmartAI WHERE entry …

在线教育系统怎么运营,教育机构转化模型分析

做增长的都会明白&#xff0c;付费用户的增长才是关键&#xff0c;而且还是规模化的增长&#xff0c;毕竟拉新只是第一步&#xff0c;最重要的一步还在于如何转化。况且&#xff0c;很多人会选择尝试付费推广&#xff0c;这部分渠道用户要怎么引导购买产品&#xff0c;才能抵消…