微信小程序组建监听observers

这篇具有很好参考价值的文章主要介绍了微信小程序组建监听observers。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一。作用:用于监听和响应任何属性和数据字段的变化

二。限制:
1.小程序基础库2.6.1开始支持
2.只能在自定义组建中使用,再页面中无法使用

三。使用
1.自定义组件的properties中的数据属性

 Component({
  /**
   * 组件的属性列表
   */
  data: {},
  properties: {
    obj: {
      type: Object,
      value: {},
      observer(newVal,oldVal) {// 数据监听. 可拿到最新的值和上一次的值
        console.log("newVal", newVal);
      },
    },
  },
});

2.跟data同级,可监听data和props内的数据。‘ ** ’为通配符,可监听所有数据变动文章来源地址https://www.toymoban.com/news/detail-621660.html

Component({
  properties: {
  	 arrList: {
      type: Array,
      value: [],
    },
  },
  data: {
	dataVal:'',
    name:'章三'
  },
  observers: {
    dataVal: function (newVal) {//监听dataVal变动
      console.log(newVal)
    },
    arrList: function (newVal) {//监听arrList变动
      console.log(newVal)
    },
    '**': function() {// 每次 setData 都触发。监听所有数据变化
      console.log(this.data)
    },
//多个监听
'dataVal,name'(dataVal,name){

     }
  },
});

到了这里,关于微信小程序组建监听observers的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中的 广播监听事件

    定义 WxNotificationCenter.js  文件;  在需要的页面js中引入该文件

    2024年02月10日
    浏览(23)
  • 微信小程序的数据监听器

    数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下。 Component({   observers: {     \\\'字段A, 字段B\\\': function (字段A的新值, 字段B的新值) {       // do something  

    2024年02月09日
    浏览(57)
  • 微信小程序页面监听全局变量变化

    在前段时间的开发过程中,遇到了一个需要监听是否有推送的需求,需要在不同的页面监听全局变量从而进行条件渲染,因此总结了一下便有了下篇文章. 当我们开发一个大型的微信小程序时,通常会涉及到多个页面或组件之间的数据传递和共享,而全局变量可以方便地实现

    2024年02月13日
    浏览(55)
  • 小程序组件引用、子父组件传值、监听等详细介绍、component、observers

    目录 组件生命周期  组件引用 组件传值 父组件给子组件传值  子组件给父组件传值 observers 数据监听  注意事项 在介绍组件属性时,先介绍下组件的生命周期,可用的全部生命周期如下表所示: 生命周期 参数 描述 最低版本 created 无 在组件实例刚刚被创建时执行 1.6.3 att

    2024年02月06日
    浏览(27)
  • 微信小程序监听页面跳转API

    2024年02月15日
    浏览(34)
  • 微信小程序——监听页面滑动(一)onPageScroll

    知识专栏 专栏链接 微信小程序专栏 https://blog.csdn.net/xsl_hr/category_12338067.html?spm=1001.2014.3001.5482 微信小程序——Git版本管理 https://blog.csdn.net/XSL_HR/article/details/130986889?spm=1001.2014.3001.5501 有关 微信小程序 的相关知识可以前往微信小程序官方文档查看了解!! 微信小程序官方文档

    2024年02月09日
    浏览(27)
  • 监听微信小程序页面的数据变化

    1、数据监听是为了当数据发生变化时,做一些操作; 2、它的作用相当于Vue中的watch 侦听器 先看效果: 第一、先在页面中使用          ①: 创建watch文件         ②:在页面中引入并使用         wxml:         js: 第二:在组件中使用数据监听           ①:wxml:  

    2024年02月16日
    浏览(38)
  • 微信小程序 自定义全局事件监听实现

    一般app页面都需要关联刷新,比如登录后刷新登录前页面,故此,需要一个全局事件监听类,怎么实现呢? 根目录创建文件夹utils,新建文件eventBus.js(致敬java平台的EventBus),码入以下代码: 主要就是newKey、on、off、post方法,分别是创建key、开始监听、结束监听、发出事件

    2024年02月11日
    浏览(37)
  • 微信小程序常用页面监听跳转方法

    使用wx.navigateTo(Object object)方法跳转,此跳转方法会保留当前页面,将跳转到应用内的某个页面,特别注意,此方法不能跳到 tabbar 页面,也就是咱们常用的底部菜单栏对应的tabbar 页面。具体示例代码: 这只是常见的用法,如果需要数据回调,可参考微信官方文档。 2. 使用

    2024年02月13日
    浏览(35)
  • 微信小程序设置简单的监听器(转载)

    ================================================================================ 创建一个watch.js文件 /** 设置监听器 watch.js */ export function setWatcher(page) { let data = page.data; let watch = page.watch; Object.keys(watch).forEach(v = { let key = v.split(‘.’); // 将watch中的属性以’.\\\'切分成数组 let nowData = data; // 将data赋

    2024年04月17日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包