关于解决父子组件传参异步的问题

最新推荐文章于 2022-12-07 17:46:35 发布
最新推荐文章于 2022-12-07 17:46:35 发布
阅读量398 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52703823/article/details/116704728
版权

我所碰到的项目是播放视频直播的项目 每次点击视频列表的时候第一次组件传参是没问题的 但是第二次组件传参的时候 正在通过axios请求数据的过程中，子组件所拿到的数据没有发生改变（axios请求还没有完成）这时候子组件是默认不发生任何改变的 以至于后面每一次视频的变化 需要重复点击两次才更更改传到子组件的值（也就是axios完成请求时数据发生了变化后）

具体解决办法如下 ：

给子组件套上一个key值 在每次axios请求完成以后，更改key值以至于达到子组件更新的目的

赋值完成 子组件key值改变 刷新子组件 问题解决 

需要注意的是key值最好不要写死 不然每次key值没有发生变化 子组件不会发生改变

poanpanx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular父子组件通过服务传参的示例方法
10-17
总之，Angular的Service是一种强大的工具，可以用来解决复杂的组件通信问题，特别是在处理路由级别的父子组件通信时。通过创建和使用SharedService，我们可以有效地在组件间传递数据，提高代码的可复用性和可维护性...
vue非父子组件通信问题及解决方法
08-27
这里遇到了需要将 login 组件通过异步请求获得的用户信息传向 user 组件，但是 login 和 user 组件不是父子组件，暂称为兄弟组件。 解决问题： 一、将 login 组件和 user 组件合并成一个组件，避免了组件间的信息...
Vue 子组件与父组件之间传值
热门推荐
逐梦十年的博客
07-29 1万+
1.父组件与子组件传值props 1.1定义父组件，父组件传递msg这个数值给子组件(子组件接收到为msgVal): 1.2定义子组件，子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型，如果不符合会报错。 注意：父子组件传值，数据是异步请求，有可能数据渲染时报错 原因：异步请求时，数据还没有获取到但是此时已经渲染节点了 解决方案：可以在父组件需要传递数据的节点加上 v-if = isReady(isReady默认为false），异步请求获取数据后（..
父组件传值给子组件（异步）
qq_42885702的博客
11-11 2089
一、父子组件生命周期函数运行顺序 *父created ----> 父beforemouted -------> 子created -------> 子beforemouted ----- ---->子mouted --------> 父mouted* 二、父子组件异步传值的坑 子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子...
vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法
Hiroshi's
03-11 5504
做项目时候遇到一件怪事： 父组件向子组件<dialog-info/>传个参数arrdata，是个数组 因为是Array类型的参数，子组件中进行了接收，并且default通过函数返回一个空数组 然后子组件中例行公事验证下是否正常拿到值 惊呆了，竟然是空的数组！ 可是vue调试工具中props正常拿到了啊 有点意思，后来根据项目结构想了一下，发现问题出在哪里了 项目是这样的： 这就是父组件所在的页面，点击蓝色按钮新增，会触发回调方法，显示<DialogInfo>子组件 而父组
vue---父子组件传输异步数据
wlijun_0808的博客
06-16 4812
vue---父子组件传输异步数据
vue父子组件传值：异步传输数据的问题
Liubingzhe
12-07 1135
vue
vue同步父子组件和异步父子组件的生命周期顺序问题
12-12
关于vue组件的引入方式有两种 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/...
VUE 父子组件传递
02-23
HTML编码中，利用了Vue框架，在该框架下父子组件直接经常需要进行数据传递
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题
weixin_43290151的博客
05-24 9841
vue中父组件异步数据通过props方式传递给子组件，子组件接收不到的问题 问题描述 组件化开发中经常用到父子组件的通信，父传子子传父等数据的操作，如果父组件的数据是发请求从后端获取的异步数据，那么父组件将这个数据传递给子组件的时候，因为是异步数据，就会出现父组件传递过去了，但是子组件mounted钩子初始情况下是接收不到的问题。本篇文章记录了一下这个问题的解决方案。 在说这个问题之前，我们先来回顾一下父子组件的生命周期 父子组件生命周期执行顺序 加载渲染数据过程父组件 beforeCreate -
Vue 父子组件传值异步获取
我的博客
05-02 1606
这个问题首先是在子组件渲染完成时传过来的错信息发现的，Error in mounted hook: "TypeError: Cannot read property '0' of undefined"，我想要通过父子组件异步传数组，但数组最先是空值，所以我们就需要在子组件中使用 watch 来解决这个问题 watch: { tagValue: { handler(newValue) { ...
解决父子组件异步传参
weixin_50508597的博客
08-19 231
废话不多说直接上代码，简单暴力 第一种方法：父页面 <子组件 v-if=‘数据！=null’ :数据=‘数据’> 第二种方法：子页面 通过watch监听异步数据调用，因为生命周期create,mouthd只会执行以下所以通过监听调用methods watch:{ 数据：function(new,old){ this.updata(new) } } ， methods:{ updata(val){ consolo.log(val)____这就是传过来的值 } } ...
vue父子组件传值之异步之后子组件无法拿到父组件传的值
weixin_34183910的博客
11-28 1428
在vue中父子组件传值是非常常见的，父组件给子组件传值使用的是props，子组件给父组件传值使用的是$emit 但是今天就不详细的介绍父子组件之间传值，在这里我们介绍的是子组件在异步请求回来的参数无法传递给子组件，子组件拿到的父组件的传递过来的参数一直是undefined，这里主要介绍一下如何拿到异步之后的数据： 主要介绍一下两种方法给大家： 方法1： 1.在我的子组件开始的时候初始化我的参数，...
vue父子组件的传值获取异步数据
qq_33317437的博客
08-06 1157
在子组件用watch监听数据的变化 props: ['editorDetail','imagePath'], watch: { 'editorDetail': function(newVal,oldVal){ this.formDetail = newVal; }, deep: true, }, ...
vue中父组件异步获取数据给子组件传参
weixin_40800926的博客
11-28 1681
问题： inferenceData:是父组件异步请求后获取的数据，获取成功之后父组件给子组件传递此数据，子组件使用，子组件获取不到inferenceData的值，打印结果为空数据，结果没有传递过去。 原因：异步请求还未获取到结果，已经初始化加载了子组件。 父组件： <el-main v-loading="loading" el...
关于Vue父传子异步传递数据问题
A_9888的博客
09-22 757
问题描述：使用videoPlayer插件封装视频组件，父组件通过网络请求的数据URL地址传给视频URL使其显示，由于异步问题，需要用一个中间变化数据来通知传递过程 解决：在父组件里面定义个flag,父组件中网络请求成功后把flag变为true，组件上通过v-if去监听网络请求完成以后再去传值 代码 视频子组件 父组件 ...
小程序父组件向子组件传值 异步问题
weixin_44156500的博客
03-11 4694
我在小程序里 自己封装的组件 父组件向子组件传值的时候 子组件在ready 里接收父组件传过来的值 不能直接拿到函数里用 会有异步的问题 后来在社区问了问才发现 可以用监听父组件传过来的值 然后通过监听属性 来实现 当 父组件传过来的值改变是就会调用这个函数 list:{type:Array, observer: function (list) { var that = t...
Vue父子组件通讯与异步问题
weixin_34161083的博客
05-08 697
场景描述 在父组件中, 通过ajax调用接口,获取后台数据,然后通过props把数据传递到子组件中，实现父子组件通讯。 1.父组件 &lt;template&gt; &lt;Child :msg="msgDetail"&gt;&lt;/Child&gt; &lt;Others&gt;&lt;/Others&gt; &lt;template&gt; &lt;script&
vue父子组件传值，父组件异步获取值，子组件不能动态更新
qq_45938274的博客
10-09 1294
vue父子组件传值，父组件异步获取值，子组件不能动态更新新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 父组件使用v-bind 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown
vue父子组件传参 required
最新发布
08-23
在Vue中，父组件向子组件传递参数有多种方式。其中一种方式是通过props属性来传递参数。在父组件中，可以在子组件的标签上使用冒号加上要传递的属性名来绑定一个值，这个值可以是父组件中的数据或者是一个方法。在子组件中，可以通过props来接收父组件传递过来的参数。 如果要实现子组件向父组件传递参数，可以使用$emit方法。在子组件中，可以通过在方法中调用$emit方法来触发一个自定义事件，并将要传递的参数作为第二个参数传入。在父组件中，可以在子组件的标签上使用@符号来监听这个自定义事件，并在相应的方法中接收子组件传递过来的参数。 综上所述，通过props属性和$emit方法，可以实现Vue父子组件之间的参数传递。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue父子组件传参的4种方式](https://blog.csdn.net/glorydx/article/details/112247747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue3父子组件传参(setup语法糖写法)](https://blog.csdn.net/skyblue_afan/article/details/126667586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值