vue3 父组件 props 异步传值,子组件接收不到或接收错误
1. 使用场景
我们在子组件中通常需要调用父组件的数据,此时需要使用 vue3 的 props 进行父子组件通信传值。
2. 问题描述
那么此时问题来了,在使用 props 进行父子组件通信时,因为数据传递是异步的,导致子组件无法成功获取数据,若此时父组件中数据发生变化,那子组件获取的值是改变之前的数据。
举个 🌰:
父组件中有一个 tab 进行切换导航,下面的输入框区域为子组件,“个人” clueScope 为 1,“团队” clueScope 为 2,将父组件中的 clueScope 通过 props 传递给子组件,此时会出现下面的结果:
最开始控制台输入一行“个人”的 clueScope,接下来我们点击“团队”输出 1,点击“个人”输出 2,原因是我们在子组件获取的是父组件传递的数据更新之前的值,意识到这个很重要。
这么说有点抽象,简单看一下局部的代码:
父组件
const queryForm = ref({clueScope: 1, // 默认为 个人 -- 1}
)
const ChildRef = ref();
const renderTab = () => (<div><ElTabs v-model={queryForm.value.clueScope} onTabChange={handleChangeTab}><ElTabPane label='个人' name='1' /><ElTabPane label='团队' name='2' /></ElTabs></div>
);
// 切换 tab
const handleChangeTab = () => {ChildRef.value.resetForm();
;
return () => (<div class=''>{renderTab()}<ChildCompref={ChildRef}clueScopeType={queryForm.value.clueScope}/></div>
);
子组件使用 expose 抛出方法,让父组件进行调用。
props: {clueScopeType: {type: Number,default: ClueListTabEnum.个人私池,},
},
const resetForm = () => {console.log(props.clueScopeType, 'type');
}
expose({resetForm,
});
此时就会出现上述问题。
3. 原因
使用 props 进行父子组件通信时,子组件异步获取父组件传递的数据,也就是说,子组件还未获取父组件改变之后的数据,就已经开始执行函数,输出的就是父组件改变之前的值,因此无法成功渲染数据拿到真实值。
4. 解决方法
方法一:watch
最常见的方法就是使用 watch 进行监听,当数据发生改变之后,在执行某项操作。
// 子组件添加 watch
watch(() => props.clueScopeType, (newValue) => {console.log(props.clueScopeType, 'type');
})
注意 ⚠️:
一般在实际项目开发中,不建议使用 watch,因为后续可能会有其他的功能也涉及到 tab 的变化做一些操作,这样可能会出现逻辑上的耦合,如果我们把多个相互不耦合的函数,都放在一个 watch 里面,那监听的变量越来越多,这个 watch 函数也会越来越大,越来越不好控制,违背了程序的初衷。
方法二:传递参数
沿用刚刚的 resetForm 方法进行修改。
我们在父组件中传递具体的参数值,子组件中可以顺利获取,原因是,在调用函数的时候,父组件传递的值一定是改变后的值,那么子组件获取的也一定是真实的值。
// 父组件
// 切换 tab
const handleChangeTab = () => {RouteSearchRef.value.resetForm(queryForm.value.clueScope);
};
// 子组件
const resetForm = (type) => {console.log(type, 'type');
}
expose({resetForm,
})
以上两个方法都可以成功解决,大家可以根据实际问题具体选择哪一种。
相关文章:

vue3 父组件 props 异步传值,子组件接收不到或接收错误
1. 使用场景 我们在子组件中通常需要调用父组件的数据,此时需要使用 vue3 的 props 进行父子组件通信传值。 2. 问题描述 那么此时问题来了,在使用 props 进行父子组件通信时,因为数据传递是异步的,导致子组件无法成功获取数据…...

[C++]TinyWebServer
TinyWebServer 文章目录 TinyWebServer1 主体框架2 Buffer2.1 向Buffer写入数据2.2 从Buffer读取数据2.3 动态扩容2.4 从socket中读取数据2.5 具体实现 3 日志系统3.1 生产者-消费者模型3.2 数据一致3.3 代码 4 定时器4.1 调整堆中元素操作4.2 堆的操作4.2.1 增4.2.2 删4.2.3 改…...
Uniswap价格批量查询与ws订阅行情
Uniswap价格批量查询与ws订阅行情 由于 Uniswap V1 版本必须包含 ETH 所以两个 token 之间交换必须先换成 ETH 去中转效率很低已经弃用了 由于 V3 版本 CLMM 和 V4 版本的 DLMM 数学模型过于复杂,还是先从 AMM 模型的 V2 进行入门和学习 Uniswap 三种合约 Unisw…...

vue 实战 区域内小组件元素拖拽 示例
<template><div><el-button type"primary" click"showDialog true">快捷布局</el-button><el-dialog title"快捷布局配置" :visible.sync"showDialog"><el-row :gutter"20"><el-co…...
C++多线程编程中的锁详解
在现代软件开发中,多线程编程是提升应用程序性能和响应能力的重要手段。然而,多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性,C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...

van-dialog 组件调用报错
报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>,并且提示可能是由于未正确注册该组件导致的。在 vue 中,当我们使用自定义组件时,需要先在 vue 实例中注册这些组件,以便 vue 能…...

【Django】在vscode中运行调试Django项目(命令及图形方式)
文章目录 命令方式图形方式默认8000端口设置自定义端口 命令方式 python manage.py runserver图形方式 默认8000端口 设置自定义端口...
麦田物语第十三天
系列文章目录 麦田物语第十三天 文章目录 系列文章目录一、实现根据物品详情显示 ItemTooltip1.ItemTooltips脚本编写二、制作 Player 的动画一、实现根据物品详情显示 ItemTooltip 1.ItemTooltips脚本编写 首先创建Scripts->Inventory->UI->ItemTooltip脚本,然后…...

【Git多人协作开发】不同的分支下的多人协作开发模式
目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…...
Lua 复数计算器
Lua复数计算器 主要包括复数的加减乘除操作,以及打印 编写复数类 -- ***** 元类 ***** Complex {real 0, imag 0}-- 构造函数 function Complex:new(real, imag)local o o or {}o.real real or 0o.imag imag or 0setmetatable(o, self)self.__index selfr…...
深入MySQL中的IF和IFNULL函数
在数据库查询中,我们经常需要根据条件来决定数据的显示方式。MySQL提供了多种内置函数来帮助我们实现这种条件逻辑,其中IF和IFNULL是两个非常有用的函数。在这篇博客中,我们将深入探讨这两个函数的用法和它们在实际查询中的应用。 IF函数 I…...

AI多模态实战教程:面壁智能MiniCPM-V多模态大模型问答交互、llama.cpp模型量化和推理
一、项目简介 MiniCPM-V 系列是专为视觉-语⾔理解设计的多模态⼤型语⾔模型(MLLMs),提供⾼质量的⽂本输出,已发布4个版本。 1.1 主要模型及特性 (1)MiniCPM-Llama3-V 2.5: 参数规模: 8B性能…...

Docker 搭建Elasticsearch详细步骤
本章教程使用Docker搭建Elasticsearch环境。 一、拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.8.2二、运行容器 docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.type=single-n...
mysql中提供的函数
文章目录 1.聚合函数2.字符串函数3.数值函数4.日期函数5.流程函数 MySQL 是一个功能强大的关系型数据库管理系统,其中包含了丰富的内置函数,用于处理各种数据操作和查询。这些函数可以分为多种类型,包括字符串函数、数值函数、日期和时间函数…...

加速下载,揭秘Internet Download Manager2024下载器的威力!
1. Internet Download Manager(IDM)是一款广受欢迎的下载管理软件,以其强大的下载加速功能和用户友好的界面著称。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一键安装包链接:抓紧保存以…...
oracle 宽表设计
Oracle宽表设计主要涉及到数据库表或视图中字段(列)数量较多的情况。在Oracle 23c及以后的版本中,数据库表或视图中允许的最大列数已增加到4096,这为宽表设计提供了更大的灵活性。以下是对Oracle宽表设计的详细分析: …...

winrar安装好后,鼠标右键没有弹出解压的选项
本来安装挺好的,可以正常使用,有天我把winrar相关的文件挪了个位置,就不能正常使用了。 然后我去应用里面找,找到应用标识了,但是找不到对应的文件夹(因为我挪到另外一个文件夹里了)。 于是我找…...

数字图像处理笔记(一)---- 图像数字化与显示
系列文章目录 数字图像处理学习笔记(一)---- 图像数字化与显示 数字图像处理笔记(二)---- 像素加图像统计特征 数字图像处理笔记(三) ---- 傅里叶变换的基本原理 文章目录 系列文章目录前言一、数字图像处理二、图像数…...

Unity UGUI 之 事件接口
本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本,请注意分别 1.什么是事件接口&…...

Hadoop、HDFS、MapReduce 大数据解决方案
本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...

Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...

C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...