vue3使用provide和inject传递异步请求数据子组件接收不到

前言

一般接口返回的格式是数组或对象,使用reactive定义共享变量

父组件传递

const data = reactive([])// 使用settimout模拟接口返回
setTimeout(() => {// 将接口返回的数据赋值给变量Object.assign(data, [{ id: 10000 }])
}, 3000);provide('shareData', data);// 这行代码也不用写在异步请求回调里,我一般放在js代码最底部

子组件接收

<template>{{ receiveData }}
</template><script lang="ts" setup>
import { inject } from 'vue';const receiveData = inject('shareData')
console.log(receiveData );// 这个位置打印时取不到最新的数据,直接在html代码里使用,会有数据// 如果想在js中处理后使用,加个watch监听,采用深度监听deep:true
watch(() => receiveData, (res) => {console.log(res);// TODO处理数据
}, { deep: true })</script>

可以看到子组件模板中先显示初始值,待接口返回后更新为最新值 

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

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

相关文章

C++第五十一弹---IO流实战:高效文件读写与格式化输出

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1. C语言的输入与输出 2. 流是什么 3. CIO流 3.1 C标准IO流 3.2 C文件IO流 3.2.1 以写方式打开文件 3.2.1 以读方式打开文件 4 stringstre…

「数组」十大排序:精讲与分析(C++)

概述 截止目前&#xff0c;我们已经讲解并分析了十种最常见的排序算法&#xff0c;下附对应文章链接和全体Code。 链接 「数组」冒泡排序|选择排序|插入排序 / 及优化方案&#xff08;C&#xff09; 「数组」归并排序 / if语句优化|小区间插入优化&#xff08;C&#xff09…

在k8s中,客户端访问服务的链路流程,ingress--->service--->deployment--->pod--->container

ingress是一个API资源。 其核心作用是nginx网页服务器。 当客户端访问服务器不同的url时, 用不同的location提供服务。 在k8s之外&#xff0c;nginx的配置一般如下&#xff1a; http {server {listen 80;server_name localhost;location / {root html; …

HarmonyOS开发之(下拉刷新,上拉加载)控件pulltorefresh组件的使用

效果图&#xff1a; 一&#xff1a;下载安装&#xff08;地址&#xff1a;OpenHarmony-SIG/PullToRefresh&#xff09; ohpm install ohos/pulltorefresh 二&#xff1a;使用lazyForEarch的数据作为数据源 export class BasicDataSource implements IDataSource{private l…

外卖会员卡是不是一个骗局?

大家好&#xff0c;我是鲸天科技千千&#xff0c;大家都知道我是做小程序开发的&#xff0c;平时会给大家分享一些互联网相关的创业项目&#xff0c;感兴趣的可以跟我关注一下。 首先就是要搭建一个自己的外卖会员卡系统小程序&#xff0c;我们自己的工作就是把这个小程序推广…

海外云手机——跨国业务的高效工具

海外云手机是一种基于云计算的虚拟手机服务&#xff0c;依托海外服务器实现跨国网络访问。这项服务不仅具备传统智能手机的所有功能&#xff0c;还突破了地域限制&#xff0c;为跨国业务提供更加便捷、高效、安全的解决方案。 随着全球化的加速和互联网的快速普及&#xff0c;跨…

LabVIEW减速机加载控制系统

为了保障减速机的产品质量&#xff0c;开发了一套基于LabVIEW的减速机加载控制系统。该系统利用先进的传感技术与自动化控制理念&#xff0c;实现了减速机性能的全面测试与分析&#xff0c;有效提升了生产线的自动化水平与检测效率。 项目背景 随着工业自动化水平的不断提高&a…

002 JavaClent操作RabbitMQ

Java Client操作RabbitMQ 文章目录 Java Client操作RabbitMQ1.pom依赖2.连接工具类3.简单模式4.工作队列模式&#xff08;work&#xff09;公平调度示例 5.发布/订阅模式&#xff08;fanout&#xff09;交换机绑定示例代码 6.路由模式&#xff08;direct&#xff09;7.Topic匹配…

基于yolov8的无人机检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的无人机检测系统是一项前沿技术&#xff0c;结合了YOLOv8深度学习模型的强大目标检测能力与无人机的灵活性。YOLOv8作为YOLO系列的最新版本&#xff0c;在检测精度和速度上均有显著提升&#xff0c;特别适用于复杂和高动态的场景。 该系统通过捕获实…

quartz 搭配SQL Server时出现deadlock的解决方案

背景&#xff1a; 最近在折腾换OA系统&#xff0c;遇到了一个很诡异的事情。在测试阶段&#xff0c;OA系统经常莫名地宕机&#xff0c;停止响应。查下来&#xff0c;发现是数据库出现大量死锁&#xff0c;耗尽了连接池。出现问题的语句是一样的&#xff0c;问题锁定在QRTZ_TRI…

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

学习使用在windows系统上安装vue前端框架以及环境配置图文教程 1、安装nodejs2、安装vue3、安装Vue-cli脚手架4、安装高版本5、创建vue项目6、启动项目7、配置开发环境8、发布项目 1、安装nodejs 点我查看教程 2、安装vue winR&#xff0c;打开cmd cnpm install vue -g表示安…

COMDEL电源维修CLX2500康戴尔射频电源维修

美国COMDEL射频电源维修常见型号包括&#xff1a;CLX2750&#xff1b;CLX2500&#xff1b;CLX-600H&#xff1b;CX600AS&#xff1b;CX-5000S&#xff1b;CX-3500S&#xff1b;CX-2500S&#xff1b;CV500&#xff1b;CDX2000等。 Comdel成立于1966年&#xff0c;总部设在马萨诸…

pdf转jpg工具分享,4款搞定90%的PDF转格式

PDF转换真的是要学会的技能&#xff0c;我最近遇到了一个难题&#xff1a;我需要将一些PDF文件转换成JPG格式&#xff0c;以便在不同的设备上查看和编辑。我尝试了几个不同的工具&#xff0c;今天&#xff0c;我就来和大家分享一下我的使用体验&#xff0c;希望能帮到和我一样在…

企业社会信任数据,信任指数(2004-2022年)

企业社会信任是指公众对企业及其行为的信任程度&#xff0c;这种信任度是基于企业的商业行为、产品质量、服务态度、信息披露透明度和社会责任履行等多方面因素的综合评估。 2004年&#xff0d;2022年 企业社会信任数据&#xff08;大数据&#xff09;https://download.csdn.n…

Netty笔记06-组件ByteBuf

文章目录 概述ByteBuf 的特点ByteBuf的组成ByteBuf 的生命周期 ByteBuf 相关api1. ByteBuf 的创建2. 直接内存 vs 堆内存3. 池化 vs 非池化4. ByteBuf写入代码示例 5. ByteBuffer扩容6. ByteBuf 读取7. retain() & release()TailContext 释放未处理消息逻辑HeadContext 8. …

电脑与电脑之间怎么快速传输文件?

若两台电脑在同一局域网&#xff0c;可以使用Windows远程桌面传输文件&#xff0c;或者使用远程看看这款免费的远程桌面软件&#xff0c;它支持在不同的网络之间传输文件&#xff0c;而且速度快、安全性高。 步骤1. 在两台电脑上下载、安装并运行远程看看。 步骤2. 注册一个远…

CGAL 从DSM到DTM filtering

CGAL 从DSM到DTM filtering 上一节通过连通区域计算并将连通信息保存到三角面片中&#xff0c;获取了多个连通区域&#xff0c;本节将设置阈值将建筑物区域移除&#xff0c;生成一个最初的DTM。 建筑物区域去除 设置阈值为min_size&#xff0c;遍历三角面片&#xff0c;对连…

macOS系统Homebrew工具安装及使用

1.打开Homebrew — The Missing Package Manager for macOS (or Linux) 2.复制安装命令到终端执行 复制 执行 3. 开始自动安装过程 4.安装成功 5.使用brew安装wget工具

基于SSM的在线家教管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的在线家教管理系统拥有三个角色 管理员&#xff1a;用户管理、教师管理、简历管理、申请管理、课程管理、招聘教师管理、应聘管理、评价管理等 教师&#xff1a;课程管理、应聘…

掌握ZooKeeper的业务使用场景,ZooKeeper如何实现分布式锁

1. ZooKeeper分布式锁 1.1 排他锁实现分布式锁 面试官&#xff1a;知道Zookeeper有什么应用场景吗? 目前地球村里大型公司部署的分布式技术&#xff0c;绝大部分都是由Zookeeper提供底层的技术支持&#xff0c;所以Zookeeper多么重要就不用我多说了吧。 我们可以利用Zookeep…