小程序自定义组件 - 数据监听器

一、数据监听器

1、什么是数据监听器

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

// 数据监听器
Component({
   
    observers: {
   
        '字段1, 字段2': function (字段1的新值, 字段1的新值) {
   
            //想实现的代码
        }
    }
 )}

2、数据监听器的基本用法

• 组件的 UI 结构如下:

<view>
    {
   {
   n1}} + {
   {
   n2}} = {
   {
   sum}}
</view>
<button bindtap="addN1">n1 + 1</button>
<button bindtap="addN2" type="primary">n2 + 1</button>

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

/**
     * 组件的方法列表
     */
    methods: {
   
        addN1() {
   
            this.setData({
   
                n1: this.data.n1 + 1
            })
        },
        addN2