当前位置: 首页 > news >正文

学习笔记230827--vue项目中,子组件拿不到父组件异步获取数据的问题

🧋 问题描述

父组件的数据是请求后台所得,因为是异步数据,就会出现,父组件的值传递过去了,子组件加载不到,拿不到值的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pn9unWDw-1693103033395)(https://note.youdao.com/yws/res/9/WEBRESOURCE717fc88846ccc13c044a1e223126def9)]

下面从同步数据传递和异步数据传递开始论述问题

🧋🧋1. 父组件传递的是同步数据
  • 父组件

        <template> <div class="parent"><div class="child"><props-children :data="dataJson"></props-children></div><input type="text"  v-model="dataJson"/></div></template><script>import propsChildren from '../../component/props/props_children.vue'export default {components: { propsChildren },data(){ return{dataJson:"初始化数据"}},created(){console.log('父created',this.dataJson)},beforeuUpdate(){console.log('父beforeupdated',this.dataJson)},updated(){console.log('父updated',this.dataJson)},beforeDetroy(){console.log('父beforeDetroy',this.dataJson)},detroyed(){console.log('父detroyed',this.dataJson)}}</script><style scoped>.child{width:600px;height:600px;background:#eee;}</style>
    
  • 子组件

    <template><div>我是子组件<br><br><br>获取到父组件数据:{{data}}<br><br><br><input type="text"  v-model="data"/></div></template> <script>export default {mounted(){console.log('子组件拿到数据',this.data)},props:{data:{default:"",require:true,type:String}},created(){console.log('子created',this.data)},beforeUpdate(){console.log('子beforeupdated',this.data)},updated(){console.log('子updated',this.data)},beforeDetroy(){console.log('子beforeDetroy',this.data)},detroyed(){console.log('子detroyed',this.data)}}</script><style></style>
    

如图所示:

  • 在created阶段,父组件的初始化数据就已经传递给了子组件的props

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qATnm0VP-1693103033400)(https://note.youdao.com/yws/res/1/WEBRESOURCEef9e584f878538fed9af15b7ffaba1e1)]

  • 在created阶段,把获取的同步数据赋值给初始化数据,不会触发update钩子函数,子组件加载也能拿到数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jfcWIjPZ-1693103033403)(https://note.youdao.com/yws/res/4/WEBRESOURCE405319a84ce951d33284d54e96c59304)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hh2isRv4-1693103033405)(https://note.youdao.com/yws/res/a/WEBRESOURCE9d4d920a472804c230ba7a9e6e35e28a)]

  • 父组件更新数据(触发update),子组件也会同步更新,但是先更新的是子组件里的数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xEj4L6Jj-1693103033407)(https://note.youdao.com/yws/res/4/WEBRESOURCEb3e3c88a52735c3328ae1a51de1f7e74)]

  • 子组件去更新props里的数据,父组件不但接收不到,而且还会报错

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAQlqToa-1693103033409)(https://note.youdao.com/yws/res/6/WEBRESOURCE01aa38076fe0445148a42c134336fa56)]

父子组件声明周期执行顺序

加载渲染数据过程

父:beforeCrete --> 父:created --> 父:beforeMount --> 子:beforeCreate --> 子:created --> 子:beforeMount --> 子:mounted --> 父:mounted

更新渲染数据过程

父:beforeUpDate --> 子:beforeUpdate --> 子:updated --> 父:updated

销毁组件数据过程

父:beforeDestroy --> 子:beforeDestroy --> 子:destroyed --> 父:detroyed

但是,如果父组件获得是后台请求的异步数据就会出现问题。

🧋🧋 2.父组件传递的是异步数据
  • 父组件
<template><div class="parent"><div class="child"><props-children :data="dataJson"></props-children></div><input type="text"  v-model="dataJson"/></div>
</template><script>
import propsChildren from '../../component/props/props_children.vue'
export default {components: { propsChildren },data(){ return{dataJson:"初始化数据"}},created(){// 模拟获取后台异步数据setTimeout(()=>{this.dataJson="父组件数据"},200)console.log('父created',this.dataJson)},beforeUpdate(){console.log('父beforeupdated',this.dataJson)},updated(){console.log('父updated',this.dataJson)},beforeDetroy(){console.log('父beforeDetroy',this.dataJson)},detroyed(){console.log('父detroyed',this.dataJson)}
}
</script><style scoped>.child{width:600px;height:300px;background:#eee;}
</style>
  • 子组件
<template><div>我是子组件<br><br><br>获取到父组件数据:{{data}}<br><br><br><input type="text"  v-model="data"/></div>
</template> <script>
export default {mounted(){console.log('子组件拿到数据',this.data)},props:{data:{default:"",require:true,type:String}},created(){console.log('子created',this.data)},beforeUpdate(){console.log('子beforeupdated',this.data)},updated(){console.log('子updated',this.data)},beforeDetroy(){console.log('子beforeDetroy',this.data)},detroyed(){console.log('子detroyed',this.data)}
}
</script><style></style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vuRVJklG-1693103033410)(https://note.youdao.com/yws/res/a/WEBRESOURCE246c2ee57a93411eadd80b789a82321a)]
【产生问题的原因】
父组件异步获取后台数据, 这时候加载渲染数据生命周期已经走完,只能更新数据,触发更新渲染生命周期,所以子组件加载时,永远只能拿到父组件的初始数据,拿不到父组件更新后的数据,但是,但是props是可以等的,页面是可以拿到异步的数据渲染的,所以就出现如上所示 的结果。

🧋解决问题

如何子组件加载获取不到父组件异步获取数据的问题

  • 方案1:使用v-if控制子组件渲染的时机,父组件拿到后台异步数据后,再渲染子组件,加载子组件的时候就能得到父组件 的异步数据。

  • 方案2:子组件使用watch监听父组件传递过来的数据。

    这种方式父组件正常传递数据即可,不要做什么代码处理,只要在子组件中加一个监听即可。

🧋问题总结

子组件props如果绑定动态数据,默认只在加载时传递,也就是说只传一次。props绑定视图层,可以传多次。父组件created赋值同步数据不会触发updated,同步数据可以在created时就传递给子组件。父组件赋值异步数据,触发update,子组件也会在update才能拿到数据,所以加载时只能拿到父组件的初始化数据。

相关文章:

学习笔记230827--vue项目中,子组件拿不到父组件异步获取数据的问题

&#x1f9cb; 问题描述 父组件的数据是请求后台所得&#xff0c;因为是异步数据&#xff0c;就会出现&#xff0c;父组件的值传递过去了&#xff0c;子组件加载不到&#xff0c;拿不到值的问题。 下面从同步数据传递和异步数据传递开始论述问题 &#x1f9cb;&#x1f9cb;1…...

sql:SQL优化知识点记录(三)

&#xff08;1&#xff09;explain之select_type和table介绍 简单的查询类型是&#xff1a;simple 外层 primary&#xff0c;括号里subquery 用到了临时表&#xff1a;derived &#xff08;2&#xff09;explain之type介绍 trpe反映的结果与我们sql是否优化过&#xff0c;是否…...

List<Map>操作汇总

分组 List<Map> mapList new ArrayList<>(); Map<String,List<Map>> mapListGroup mapList.stream().collect(Collectors.groupingBy(e->e.get("xxx").toString())); 最大值最小值 int max maps.stream().mapToInt(e -> new Inte…...

软考:中级软件设计师:网络类型与拓扑结构,网络规划与设计,ip地址与子网划分,特殊含义的IP地址

软考&#xff1a;中级软件设计师:网络类型与拓扑结构 提示&#xff1a;系列被面试官问的问题&#xff0c;我自己当时不会&#xff0c;所以下来自己复盘一下&#xff0c;认真学习和总结&#xff0c;以应对未来更多的可能性 关于互联网大厂的笔试面试&#xff0c;都是需要细心准…...

linux创建进程

linux创建进程 准备工作 准备工作 在Ubuntu64系统上 1、安装GCC和Make工具 编译器GCC&#xff1a;把C源码转为二进制程序 Make&#xff1a;自动编译多源文件项目 sudo apt-get update #更新存储库 sudo apt-get install build-essential #安装build-essential包 gcc --versio…...

100天精通Golang(基础入门篇)——第19天:深入剖析Go语言中方法(Method)的妙用与实践

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to Golang Language.✨✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1…...

【人工智能】—_不确定性、先验概率_后验概率、概率密度、贝叶斯法则、朴素贝叶斯_、最大似然估计

【人工智能】— 不确定性、先验概率/后验概率、概率密度、贝叶斯法则、朴素贝叶斯 文章目录 【人工智能】— 不确定性、先验概率/后验概率、概率密度、贝叶斯法则、朴素贝叶斯不确定性不确定性与理性决策基本概率符号先验概率(无条件概率)/后验概率(条件概率)随机变量概率密度联…...

postgresql-字符函数

postgresql-字符函数 字符串连接字符与编码字符串长度大小写转换子串查找与替换截断与填充字符串格式化MD5 值字符串拆分字符串反转 字符串连接 concat(str, …)函数用于连接字符串&#xff0c;并且忽略其中的 NULL 参数&#xff1b;concat_ws(sep, str, …) 函数使用指定分隔…...

VUE笔记(五)网络通信

一、axios的简介 1、什么是axios 文档&#xff1a;Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库&#xff0c;可以用于浏览器和 node.js 概念&#xff1a;axios是一个基于Promise的网络请求库&#xff0c;可以用于浏览器和node.js 特点&#xff…...

微信小程序修改数据,input不能实时回显

场景&#xff1a; 填写发票抬头&#xff0c;填写抬头公司时候&#xff0c;会根据用户输入的内容实时获取相关的公司信息&#xff0c;用户选择搜索出来的公司&#xff0c;这时候 setData,但是数据并没有回显&#xff0c;而是需要再需要点一下屏幕。 解决方案&#xff1a; 原来…...

GitHub Copilot三连更:能在代码行里直接提问,上下文范围扩展到终端

量子位 | 公众号 QbitAI 就在昨晚&#xff0c;GitHub Copilot迎来了一波不小的更新。 包括&#xff1a; 全新交互体验——代码行中直接召唤聊天功能&#xff0c;不用切界面&#xff0c;主打一个专注&#xff1b; 改善斜杠命令&#xff0c;一键删除&#xff0c;主打快捷操作、…...

双亲委派机制

双亲委派机制流程 当Application ClassLoader 收到一个类加载请求时&#xff0c;他首先不会自己去尝试加载这个类&#xff0c;而是将这个请求委派给父类加载器Extension ClassLoader去完成。 当Extension ClassLoader收到一个类加载请求时&#xff0c;他首先也不会自己去尝试…...

美团北极星榜单,服务零售的医美新样本

事实证明&#xff0c;任何时候&#xff0c;人们对美的追求都是刚需&#xff0c;只是有时候被压抑了。 德勤中国的《中国医美行业2023年度洞悉报告》&#xff08;以下简称“报告”&#xff09;显示&#xff0c;中国医美市场规模预计在2023年超过2000亿元&#xff0c;实现20%增速…...

geant4 常用代码

1 获取特特定能量范围的特定粒子 E:\examples_understanding\geant4-v11.0.0_note\examples\extended\runAndEvent\RE02 //-- Particle with kinetic energy filter.G4SDParticleWithEnergyFilter* pkinEFilter new G4SDParticleWithEnergyFilter(fltName"gammaE filter&…...

重要通知!eBay将升级买家满意度考核,如何让你的店铺脱颖而出?

8月份&#xff0c;eBay发布了重要通知&#xff0c;为促进跨境卖家积极提升买家体验&#xff0c;升级了针对卖家的买家满意度考核。其中&#xff0c;产品质量是买家满意度考核的核心&#xff0c;是中国卖家急需提升的重中之重&#xff0c;也是eBay考核的重点。 eBay将着眼于产品…...

PHP中pack、unpack的用法

pack string pack ( string $format [, mixed $args [, mixed $... ]] ) 该函数用来将对应的参数($args)打包成二进制字符串。 其中第一个参数$format&#xff0c;有如下选项&#xff1a; a 以NUL字节填充字符串空白 A 以SPACE(空格)填充字符串 h 十六进制字符串&…...

KUKA机器人零点标定的具体方法

KUKA机器人零点标定的具体方法 在进行机器人校正时,先将各轴置于一个定义好的机械位置,即所谓的机械零点。这个机械零点位置表明了同轴的驱动角度之间的对应关系,它用一个测量刻槽表示。 为了精确地确定机器人某根轴的机械零点位置,一般应先找到其预校正位置,然后去掉测量…...

基于SpringBoot+Vue的旅游系统

摘 要 随着旅游业的发展&#xff0c;越来越多的人选择旅游作为自己的出行方式。在旅游规划过程中&#xff0c;旅游景点选择是至关重要的环节。本文提出了一种基于协同过滤推荐算法的旅游平台系统。该系统采用前后端分离的设计&#xff0c;主要使用了SpringBoot、Vue等技术&…...

leetcode算法题--复杂链表的复制

原题链接&#xff1a;https://leetcode.cn/problems/fu-za-lian-biao-de-fu-zhi-lcof/description/?envTypestudy-plan-v2&envIdcoding-interviews 感觉一开始想到的办法还是比较笨 /*** Definition for a Node.* type Node struct {* Val int* Next *Node* …...

C++面试题(叁)---操作系统篇

目录 操作系统篇 1 Linux中查看进程运行状态的指令、查看内存使用情况的指令、 tar解压文件的参数。 2 文件权限怎么修改 3 说说常用的Linux命令 4 说说如何以root权限运行某个程序。 5 说说软链接和硬链接的区别。 6 说说静态库和动态库怎么制作及如何使用&#xff0c;区…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...