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>

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

相关推荐
百锦再5 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code10 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*168810 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员1 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
伍哥的传说11 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
伍哥的传说11 天前
react gsap动画库使用详解之scroll滑动动画
前端·javascript·vue.js·react.js·前端框架·vue·动画