Vue进阶(幺零六):子组件处理父组件异步值传递给子组件处理

本文主要是介绍Vue进阶(幺零六):子组件处理父组件异步值传递给子组件处理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 一、问题描述
    • 二、原因分析
    • 三、解决措施
      • 3.1 方法一:v-if 判断
      • 3.2 方法二:watch 监听
      • 3.3 方法三:子组件 watch + computed data 相结合
      • 3.4 方法四:使用事件总线 bus
      • 3.5 其他方法
    • 四、其它场景问题
    • 五、拓展阅读


一、问题描述

父组件通过Promise等其他异步方式获取异步数据,并传递给子组件,子组件直接显示没有问题,若对数据进行处理,则拿到的数据都是父组件初始值。

二、原因分析

父组件通过Promise等其他异步方式获取异步数据,在尚未等到数据返回时,子组件 created已经执行完毕,故此时子组件中的数据为父组件上次的数据。

父子组件的生命周期:
在这里插入图片描述
一、加载渲染过程

父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子
beforeMount–>子 mounted–>父mounted

二、子组件更新过程

父beforeUpdate --> 子 beforeUpdate–> 子 updated–> 父updated

三、销毁过程

父beforeDestroy --> 子 beforeDestroy–> 子 destroyed–> 父destroyed

三、解决措施

3.1 方法一:v-if 判断

父组件

  <child :child-data="asyncData" v-if="asyncData"></child>

asyncData有值得时候,再加载子组件。

评价:在asyncData为对象或数组元素,子组件获取对象属性或某一数组元素时,以上方法可行(不会报错),但仍会存在数据加载显示缓慢情形(及子组件首先显示的仍是上次父组件传值,然后才会渲染为当前父组件传值)。

3.2 方法二:watch 监听

子组件

watch:{childData(val){console.log('子组件 数据处理',val)}
}

评价: 以上方法仍会出现方法一中的数据加载缓慢问题。

3.3 方法三:子组件 watch + computed data 相结合

<template><div>子组件<p>{{test}}</p></div>
</template><script>export default {props: ['tableData'],data: () => ({test: ''}),watch: {tableData (val) {this.dataResult = val}},computed: {dataResult : {set (value) {this.update()this.test = value},get () {return this.test}}},methods: {update () {console.log(this.childObject) // {items: [1,2,3]}}}}
</script>

3.4 方法四:使用事件总线 bus

<template><div>子组件<p>{{test}}</p></div>
</template><script>export default {props: ['childObject'],data: () => ({test: ''}),created () {// 绑定this.$bus.on('triggerChild', (parmas) => {this.test = parmas.items[0] // 1this.updata()})},methods: {updata () {console.log(this.test) // 1}}}
</script>

这里使用了bus这个库,parent.vuechild.vue必须公用一个事件总线(也就是要引入同一个js,这个js定义了一个类似let bus = new Vue()的东西供这两个组件连接),才能相互触发。

3.5 其他方法

将数据存到store,子组件监听数据变化(watch/computed)。

四、其它场景问题

异步获取数据导致的报错的情况会在各个场景出现,比如:

  • 根据数据渲染dom,而对domjs操作的时候,会因为还没渲染出来而找不到相应的dom元素报错,这里可以用vue提供的$nextTick()函数,或者手动开个setTimeout定时器,延迟获取;
  • 使用better-scroll的时候因为dom没有渲染出来而无法获取滚动元素的高度,导致无法滚动,同样可以用vue提供的这个函数,等dom渲染完了后再初始化滚动。

五、拓展阅读

  • 《Vue进阶(六十二):理解$nextTick()》

这篇关于Vue进阶(幺零六):子组件处理父组件异步值传递给子组件处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/542649

相关文章

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)