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>

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

相关推荐
麦麦大数据4 小时前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
七仔的博客6 小时前
Vue视差标题背景
vue·博客·动画·视差
梁辰兴7 小时前
企业培训笔记:外卖平台后端--套餐管理模块--回显套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
Olrookie19 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve19 小时前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
java_强哥1 天前
vue3-tree-org实现组织架构图展示
vue
huangyiyi666661 天前
轮询那些事儿
javascript·前端框架·vue·js
七仔的博客1 天前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
duandashuaige2 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
java水泥工2 天前
旅游管理系统|基于SpringBoot和Vue的旅游管理系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·旅游管理系统