前端面试问题:子组件的某一个方法调用执行逻辑由父组件的属性状态变化来决定

面试官:请你讲讲你在该项目中遇到的问题是什么?你怎么解决这个问题?

答:我的回答:该项目的实现过程中我确实遇到了问题:【我会给大家整理回答思路和角度,那那么遇到这样的问题也可借鉴这种思路进行阐述】

层次一:分析页面:【原型图如下】

6f3c8c8bb79d495292d4bc480ae108fb.png

 

(1)发现问题:

  • 当用户首次打开查看爱好的详情页面时,页面是空白的,没有任何内容显示。

6eafc873df45430291fc3173c3b450f6.png

  • 当用户再次打开查看爱好的详情页面时,页面是有内容显示的。

8ce799cf39c543319032f01d669c0ff2.png

(2)分析问题:

在用户点击打开"查看爱好"按钮后,保存接口是在2秒后才开始执行的。这意味着,当页面第一次调用详情接口时,所需的数据还未保存完成,因此页面无法获取到任何内容,从而呈现为空白状态。这个问题的关键在于,页面的数据加载时机与数据保存的时机不匹配。页面在用户操作后立即尝试获取数据,但此时数据还未保存完成,因此获取不到任何内容。

(3)解决问题:

采用数据监听的方式,在保存接口执行完成后,自动触发页面的数据重新获取,从而确保页面能展示最新的数据。

层次二:分析代码:

(4)实现思路:

这个问题涉及到一个父子组件的通信问题。父组件有一个isSave属性,初始值为false。在父组件的save方法中,会在2秒后将isSave设置为true。子组件通过props接收到isSave属性,并在open方法中根据isSave的值来控制loading的显示和隐藏。但是,由于open方法是在子组件初始化时就调用的,所以当父组件的save方法执行结束时,子组件中的isSave仍然为false,只有在子组件再次调用open方法时,才能检测到isSave的变化。

(5)分析思路找到重难点:

要解决这个问题,我们需要想办法让子组件在初始化(初次调用open方法)时就能感知到isSave属性的变化。这可以通过使用Vue的watch功能来实现。当isSave属性发生变化时,子组件可以及时更新loading的状态。

(6)代码实现(实现过程):

ee65490eccce425fb9eef87d7d515511.png

3df0e844a04f4b488b3cb008522e4e7d.png 

  • 首先,在子组件的data中定义一个loading属性,用于控制loading状态的显示。

  • 然后,在open方法中,根据当前的isSave属性来设置loading的值。如果isSave为false,则设置loading为true,表示加载中。

  • 接下来,在watch选项中,监听isSave属性的变化。当isSave变为true时,将loading设置为false,表示加载完成。

(7)知识点应用:

  • props用于在父子组件间传递数据。

  • data用于定义组件的状态数据。

  • methods用于定义组件的方法。

  • watch用于监听数据的变化,并执行相应的操作。

  • 利用v-if指令控制元素的显示和隐藏。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/17416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Go专家编程——内存管理——逃逸分析】

逃逸分析 逃逸分析(Escape Analysis)是指由编译器决定内存分配的位置,不需要程序员决定。 在函数中申请一个新的对象 如果分配在栈上,则函数执行结束后可自动将内存回收如果分配在堆上,则函数执行结束后可交给GC&…

stoi家族函数详解

atoi家族函数详解 1.atoi函数1.1函数原型1.2函数使用1.3函数使用的注意事项1.4atoi函数的模拟实现 2.其它函数 atoi函数家族中包含atof、atol、_atoi64 他们的作用为将字符串转换成double(atof)、integer(atoi、_atoi64)、long&am…

kafka连接zookeeper失败导致无法启动

1.背景 Linux服务器磁盘使用率100%导致kafka服务挂掉,推测是别的生产者往kafka服务器不停的塞数据把服务器塞爆了,服务器总空间60g,然后进到服务器查看kafka默认数据存储路径/tmp/kafka_logs就占了37g特别是目标topic,由于这个ka…

vscode+docker搭建迷你开发环境。制作docker镜像,并通过vscode连接后进行开发

制作自己的docker镜像,将docker镜像作为服务器,接受vscode连接 目录 1. 制作开发环境镜像 1.1 选择基础镜像 1.2 编写dockerfile 1.3 构建镜像 2. 启动镜像 3. 添加用户 3.1 查看物理机上用户信息 3.2 登录到docker中 3.3 按照物理机的用户和组…

YOLO训练报错解决:OSError: [WinError 1455] 页面文件太小,无法完成操作

问题:OSError: [WinError 1455] 页面文件太小,无法完成操作。 Error loading "C:\Users\12706.conda\envs\yolov8\lib\site-packages\torch\lib\cudnn_cnn_infer64_8.dll" or one of its dependencies. 解决方法: 降低数据加载的线…

sqlalchemy连接池满了报错

报错信息 sqlalchemy.exc.TimeoutError: QueuePool limit of size 5 overflow 10 reached, connection timed out, timeout 30 (Background on this error at: http://sqlalche.me/e/3o7r) 解决办法 参考:https://docs.sqlalchemy.org/en/20/core/pooling.html 在…

掌握Adobe XD:为自学者准备的软件学习秘籍

相信了解一些设计软件的朋友都听说过这个软件,Adobe XD软件是一款功能强大的原型创建工具。随着Adobe XD软件越来越受到用户的青睐,它几乎涵盖了所有大中小企业和企业的设计,可以说是设计公司最常用的软件之一。Adobe XD软件可以在很多方面满…

Jenkins常用插件与应用详解

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 Jenkins是一个平台我们通过安装插件来解决我们想要完成的任务 1、Jenkins常用插件 Allure&#…

【Kotlin 二】函数/高阶函数/内联函数 对象/主构造函数/次要构造函数/对象初始化

1.函数 函数声明如下: fun 函数名称([函数参数...]): 返回值类型{// 方法体 }fun sum(num1: Int, num2: Int): Int {return num1 num2 }注意:Kotlin函数返回值为空时为Unit,并非常见的void 函数可以设置默认值: fun printNum…

【量算分析工具-水平距离】GeoServer改造Springboot番外系列四

【量算分析工具-概述】GeoServer改造Springboot番外系列三-CSDN博客 【量算分析工具-水平距离】GeoServer改造Springboot番外系列四-CSDN博客 【量算分析工具-水平面积】GeoServer改造Springboot番外系列五-CSDN博客 【量算分析工具-方位角】GeoServer改造Springboot番外系列…

常用图像分类预训练模型大小及准确度比较

近年来,深度学习技术的发展使得图像分类任务变得越来越容易。预训练模型的出现更是使得图像分类任务变得更加简单和高效。然而,随着预训练模型的数量和大小的增加,我们需要了解每个模型的特点和优缺点,以便更好地选择和使用它们。…

6岁开始学习打字,10岁学懂文字编程

​你们有没有想过打字速度会影响Coding 编程能力? 疫情期间,全国中小学均不定期停止面授课程,改为网上教学。顷刻之间,电脑、智能手机等即时通讯软件成为每日学习的「良师益友」,常伴左右。 同时,学生也由…

实施阶段(2024年5月)

本次探究主要围绕数学问题“斐波拉契数列”项目展开,在一题两解的算法设计过程中,对比经典算法中的迭代和递归,深入解析两者的关系,并在此基础上进行其他数学问题的深入研究。 (1)迭代法也称为辗转法&…

http和https分别是什么?区别是什么?

HTTP和HTTPS是两种常见的网络协议,用于在Web上进行数据传输。以下是它们的简要解释和主要区别: HTTP(Hypertext Transfer Protocol) HTTP是一种应用层协议,用于在Web上传输数据。它是互联网上应用最为广泛的一种网络…

20212313 2023-2024-2 《移动平台开发与实践》第5次作业

20212313 2023-2024-2 《移动平台开发与实践》第5次作业 1.实验内容 设计并开发一个地图应用系统。 该实验需提前申请百度API Key,调用接口实现百度地图的定位功能、地图添加覆盖物和显示文本信息。 2.实验过程 2.1 获取SHA1 (1)打开控制台…

PostgreSQL数据库提权

前面讲述了mysql、SqlServer、Redis数据库相关的提权方式,有兴趣的也可以去看看。 这里讲的postgreSQL数据库提权就是任意命令执行漏洞(CVE-2019-9193)。 目录 数据库简介 漏洞原理 影响版本 漏洞利用 利用前提 漏洞复现 复现准备 复现过程 漏洞修复 数据…

三分钟轻松搞定内容,2024视频号最新AI自动生成影视解说,,百分之百过原创, 月入1万+

在这个数字时代,我们有幸见证了AI技术对创新的推动。现如今,一个崭新的平台出现了,它能让你用AI软件在短短3分钟内制作完成一段影视解说,而且由于这个平台尚属于新兴,竞争者稀少,提供了一个广阔的机遇天地。…

Mysqldump备份与恢复Mysql全部数据库的数据

博主使用docker安装的mysql,现在需要迁移全部的mysql数据库,使用其他工具时,可能导致接口不通(mysql8.4与mysql8.0就不通),使用mysqldump原生工具进行迁移: 全部数据库的数据备份 mysqldump -…

爬虫利器Frida RPC入门——夜神模拟器环境篇

Frida是一款轻量级HOOK框架,可用于多平台上,例如android、windows、ios等。 frida分为两部分,服务端运行在目标机上,通过注入进程的方式来实现劫持应用函数,另一部分运行在系统机器上。frida上层接口支持js、python、…

【MySQL数据库】存储过程实战——图书借阅系统

图书借阅归还 借阅不用count判断,归还不用具体字段值判断 每次借阅或者归还只能操作1本 数据准备 -- 创建数据库 create database db_test3 CHARACTER SET utf8 COLLATE utf8_general_ci; -- 使用数据库 use db_test3; -- 创建图书信息表: create tabl…