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

菜到极致就是渣

已于 2023-09-10 16:37:57 修改

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-09-10 16:37:36 首次发布

本文链接：https://blog.csdn.net/gaoqiandr/article/details/132792618

微信小程序专栏收录该内容

13 篇文章

订阅专栏

本文介绍了数据监听器在小程序中的应用，通过实例演示如何使用observers来监听属性变化，如点击按钮动态更新两数之和。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、数据监听器的概念

二、数据监听器的案例

一、数据监听器的概念

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。他的作用类似于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
<!--components/new1/new1.wxml-->
<view>a={{a}}</view>
<view>b={{b}}</view>

<button type="primary" bind:tap="add1">a+1</button>
<button type="primary" bind:tap="add2">b+1</button>

<view>{{a}}+{{b}}={{c}}</view>