当前位置: 首页 > 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;区…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...