小程序在子组件中使用监听虽然监听到了但是值异步了的问题

最新推荐文章于 2024-08-21 14:08:31 发布
最新推荐文章于 2024-08-21 14:08:31 发布
阅读量266 收藏
点赞数
分类专栏： 微信开发 文章标签： 小程序 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51263829/article/details/129368556
版权
在开发中遇到父组件向子组件传递数据时，尽管监听到数据变化，但子组件的属性未更新。分析可能是由于异步原因，导致监听触发时值还未真正改变。尝试在数据变更时直接调用子组件方法更新值，实现了预期效果。
摘要由CSDN通过智能技术生成

父组件给子组件传值，子组件监听数据变化选择不同的背景，在做这步的时候发现虽然监听到了变化，但是值却并没有通过properties传递给子组件。

如图所示

 

虽然监听到了变化，但是却发现子组件之中的数据并没有变化，通过检查发现有可能是传值过程中存在了异步，监听的全局监听，虽然触发了监听但是子组件之中的值还并未改变 。

想到的解决办法是在调用的时候

this.changePic(newVal)直接将监听到的值传递过去，但是感觉并不是很严谨。

不过效果出来了= = 

风兮梧桐
关注
专栏目录
小程序自定义组件 - 数据监听器
weixin_42349685的博客
03-17 274
*** 组件的方法列表//修改rgb对象上r属性的值 changeR() {255 : this . data . rgb . r + 5 }) } , //修改rgb对象上g属性的值 changeG() {255 : this . data . rgb . g + 5 }) } , //修改rgb对象上b属性的值 changeB() {
微信小程序自定义组件——数据监听器
m0_61631823的博客
04-01 3169
1.概念：数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下： Component({ observers: { '字段A,字段B':function(字段A的新值,字段B的新值){ // 要进行的操作 } }, }) 2.用法：以一个简单的加法为例 首先我们在组件UI中这样定义： &
微信小程序页面监听组件内数据变化
最新发布
asd123asd098qwe的专栏
08-21 592
1.1 在组件引入页面后，在.js中新建一个方法。2.组件中方法，在需要的位置写入监听方法。1.2 在模板中绑定上述方法。
微信小程序——子组件接收参数变化时如何监听
我是我
07-13 2245
1. 使用场景 当父组件传值给子组件时，有时会出现一开始为空，网络请求或者各种操作之后这个值才真正的传过去 <t-activity-sites curPath="{{curPath}}"/> 此时，我们在子组件中，若使用该属性来发起网络请求会出现问题，那么我们需要一种情况，在子组件中监听这个属性curPath的变化，当这个值存在时，再发起网络请求 2. 实现（使用observer） data:{ currentPath:'', }, properties: { cu
小程序父子组件传值，调用方法，observer监听组件数据变化（image组件封装）
weixin_45665171的博客
02-11 539
小程序父子组件传值，调用方法，observer监听组件数据变化
【微信小程序】基础篇 -- 自定义组件 - 数据监听器 （三十四）
JMFive的博客
03-11 6466
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第34篇文章;今天开始学习微信小程序的第18天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。
微信小程序实现watch监听
10-15
在微信小程序中，开发者通常需要实时监控数据的变化以更新视图或者执行特定操作。Vue框架中的`watch`功能为此提供了解决方案，但微信小程序原生API并不直接支持`watch`。不过，我们可以模仿Vue的`watch`机制，自定义...
微信小程序动态添加和删除组件的现实
10-15
在实际开发中，还可能需要处理更复杂的场景，比如动态添加的组件需要绑定事件监听器，或者是需要向服务器发起异步请求等。这些情况需要开发者根据具体需求编写相应的逻辑代码。 通过本文的介绍，相信您已经对微信小...
小程序中使用behavior、数据监听器、组件的使用
qq_42522346的博客
01-06 1752
小程序中使用behavior 1.首先先定义behavior 每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。 behavior 需要使用 Behavior() 构造器定义。 第一步：behavi...
微信小程序学习第8天——自定义组件的数据监听器Observer小案例
背心的博客
02-07 577
自定义组件的数据监听器Observer小案例
微信小程序通过事件传递和数据监听，单独更新子组件中的数据
weixin_58836319的博客
01-17 816
微信小程序通过事件传递和数据监听，单独更新子组件中的数据
【微信小程序篇】子组件通过observer监听父级传入的参数以及执行父级传入的回调方法的使用
章魚尐芄子的博客
07-21 2421
微信小程序子组件通过observer监听父级传入的参数以及执行父级传入的回调方法的使用
父组件传值子组件，父组件改变，子组件不改变的问题
Johnsos的博客
04-19 1215
问题描述 如题目所述，贴出自己的解决方案，无非是父传子，子接收，通过深度监听，然后子传父，父组件值改变 update 和sync结合 ，节省父组件接收事件，在事件中改变值的步骤 父组件 <div class="new_musical" @click="audio_bind"> <Icon type="ios-musical-notes" /> </div> <audioModal :audio_show.sync
小程序组件中监听父组件传来的properties值
zaoqinghuan的博客
04-17 3086
前提: 在小程序中，子组件需要接受父组件传来的2个值A和B，子组件需要同时根据A和B做一些业务处理。 通常，我们可以在properties单独的针对A和B进行监听，但是我们发现，在A中使用B，取不到B值，或在B中使用A，取不到A值。这是为什么呢？其实这个涉及到事件循环的知识。 那么，有没有同时能监测到这两个值的方法呢？所以针对子组件需要同时根据A和B做一些业务处理的情况，我们需要同时监听这两个值变化。只要有一个值发生变化，都会重新处理相关业务。 参考微信开发文档：https://developers.w
vue 父组件传子组件数值，父值变更子获取的值没有变的问题
no pains,no gains
06-30 3713
1.父组件给子组件传值，子组件使用props接收值。 //父组件页面 <div> <TransChart :start-time="startTime" :end-time="endTime"/> </div> //子组件页面 props: ['startTime', 'endTime'], 问题：父组件页面在变更startTime和endTime时，子组件的值不会随之改变。 解决办法：在子组件内使用 watch 检测数据变动 watch: { endTime
微信小程序中Component中如何监听属性变化
qq_42931285的博客
08-03 780
微信小程序中Component中如何监听属性变化
小程序全局变量与组件内部实时监听全局变量的改变
weixin_44727080的博客
09-08 2461
小程序的全局变量的设置与修改，并且在页面内部、组件内部实时监听我们全局变量的改动，来实现我们的一些功能效果，比如全局弹框，比如全局loadding效果等等。
微信小程序监听父组件向子组件传过来的值
weixin_46124693的博客
10-30 936
1.父组件定义属性名称和传递的值 <goods_list radio_show="{{edit_show}}"></goods_list> 2.子组件的properties里有个方法直接调用, properties:{ radio_show:{ type: Boolean, observer:function(oldVal,newVal){ //每次父组件向子组件传值的时候都会调用这个函数 console.log(oldVal,newVal) // 旧数据和新数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值