微信小程序开发---自定义组件的数据监听器

目录​​​​​​​

一、数据监听器的概念

二、数据监听器的案例

---

一、数据监听器的概念

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

observers:{
    'a,b':function(a,b){  //a,b表示变化的值，函数中的参数你可以自己起名字
      //逻辑
    }
  }

二、数据监听器的案例

给两个数字，点击对应的按钮加一，并显示两数相加的值

// components/new1/new1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
 
  },
 
  /**
   * 组件的初始数据
   */
  data: {
     a:0,
     b:0,
     c:0
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
     add1(){
       this.setData({
         a:this.data.a+1
       })
     },
     add2(){
       this.setData({
         b:this.data.b+1
       })
     }
  },
  observers:{
    'a,b':function(a,b){
      this.setData({
        c:a+b
      })
    }
  }
})
 
 
//wxml
<view>a={{a}}view>
<view>b={{b}}view>
 
<button type="primary" bind:tap="add1">a+1button>
<button type="primary" bind:tap="add2">b+1button>
 
<view>{{a}}+{{b}}={{c}}view>