微信小程序组建监听observers

最新推荐文章于 2024-08-05 15:58:58 发布

一只开心鸭！

最新推荐文章于 2024-08-05 15:58:58 发布

阅读量2.3k

点赞数 1

文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/oneya1/article/details/129682767

版权

本文介绍了小程序中自定义组件如何使用observer来监听和响应属性及数据字段的变化。observer可以在properties内监听数据属性，并且可以使用*通配符监听所有数据变化。在组件中，observer可以分别针对特定数据或所有数据变化进行操作。

摘要由CSDN通过智能技术生成

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

二。限制：
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内的数据。‘ ** ’为通配符，可监听所有数据变动

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){

     }
  },
});