首页技术文章正文

什么是数据监听器?数据监听器的基本用法

更新时间:2023-07-17 来源:黑马程序员 浏览量:

IT培训班

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于vue中的watch侦听器。在小程序组件中,数据监听器的基本语法格式如下:

//组件的UI结构如下
<vievt{{n1}} + {{n2}} = {{sum}}</viev>
<button size="mini"bindtap="addN1">n1自增</button>
<button size="mini"bindtap="addN2">n2自增</button>

组件的 .js 文件代码如下:

Component({
  data:{n1:0,n2:0,sum:0},//数据节点
  methods:{//方法列表
     addN1(){ this.setData({n1:this.data.n1 +1 })},
     addN2(){this.setData({n2:this.data.n2 + 1 })}
  },
  observers:{//数据监听节点
     'n1,n2':function(n1,n2){       //监听 n1和n2数据的变化
       this.setData({ sum:n1 +n2 })//通过监听器,自动计算 sum的值
      }
   }
})

数据监听器支持监听对象中单个或多个属性的变化,示例语法如下:

Component({
  observers: {
    ‘对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){
       //触发此监听器的3种情况:
       //【为属性A赋值】使用 setData 设置 this.data.对象.属性A 时触发
       //【为属性B赋值】使用 setData 设置 this.data.对象、属性B 时触发
       // 【直接的对象赋值】使用 setData 设置this.data.对象时触发
       // do something.….
    }
  }
})
分享到:
在线咨询 我要报名
和我们在线交谈!