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

前言

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

父组件传递

javascript 复制代码
const data = reactive([])

// 使用settimout模拟接口返回
setTimeout(() => {
  // 将接口返回的数据赋值给变量
  Object.assign(data, [{ id: 10000 }])
}, 3000);

provide('shareData', data);// 这行代码也不用写在异步请求回调里,我一般放在js代码最底部

子组件接收

html 复制代码
<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>

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

相关推荐
瓯雅爱分享6 小时前
Java+Vue构建的采购招投标一体化管理系统,集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能,附完整源码,助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理
苏打水com9 小时前
前端框架深度解析:Vue 从入门到实战,掌握渐进式开发核心
vue
棋子一名19 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
苏打水com21 小时前
前端框架深度解析:Vue.js 3 从 Composition API 到生态升级,解锁企业级开发新能力
vue
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
小灰灰的可爱无人可替代1 天前
记录一次使用docker和docker-compose更新vue前端项目问题
nginx·docker·vue
java水泥工3 天前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
爱看书的小沐4 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue