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>

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

相关推荐
寻觅~流光10 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
好青崧11 小时前
单页面和多页面的区别和优缺点
前端·vue
程序猿小D11 小时前
[附源码+数据库+毕业论文+答辩PPT+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue实现的交流互动管理系统
spring boot·mysql·vue·mybatis·毕业论文·答辩ppt·交流互动
好青崧17 小时前
v-show和v-if的区别
vue
一笑code2 天前
UC浏览器PC版自2016年后未再更新不支持vue3
前端·vue
咔咔一顿操作2 天前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
梁辰兴3 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
一斤代码3 天前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
sunbyte3 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
普宁彭于晏3 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue