一、数据监听器
前面已经学习自定义组件 - 数据、方法和属性，通过栗子了解到自定义组件中 data 属性 和 methods 方法的使用，以及 data 和 properties 的区别。接下来就来讲解一下另外一个自定义组件 - 数据监听器。话不多说，让我们原文再续，书接上回吧。
1、什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：
Component({ observers: { 'n1, n2': function(n1, n2){ this.setData({sum: n1 + n2}) } }, })
其中 n1，n2 为监听字段，形参n1，n2也是前面字段的新值。
2、数据监听器的基本用法
了解到数据监听语法之后，通过下面的栗子来学习一下，首先对组件进行全局引用，具体代码如下所示：
app.json
{ "usingComponents":{ "my-test1": "/components/test1/test1", "my-test2": "/components/test2/test2" }, }
test2.wxml
组件的 UI 结构如下：
<text>components/test2/test2.wxml</text> <view>{{num1}} + {{num2}} = {{sum}}</view> <button size="mini" bindtap="addN1">num1+1</button> <button size="mini" bindtap="addN2">num2+1</button>
test2.js
组件的 .js 文件，监听多个字段用逗号隔开即可。
Component({ /** * 组件的初始数据 */ data: { num1: 0, num2: 0, sum: 0, }, /** * 组件的方法列表 */ methods: { addN1 (){ this.setData({num1 : this.data.num1 + 1}); }, addN2 (){ this.setData({num2 : this.data.num2 + 1}); }, }, observers: { // 监听 num1 和 num2 数据的变化 'num1, num2': function(newnum1, newnum2){ // 通过监听器自动计算 sum 的值 this.setData({sum: newnum1 + newnum2}); } }, })
message.wxml
使用 my-test2 组件。
<my-test2></my-test2>
此时当点击按钮让属性 num1 或者 num2 自加时，就会触发数据监听器，从而计算出 sum 的值，可以来看一下运行效果：
3、监听对象属性的变化
前面只对单个数据进行了监听，此外数据监听器还支持监听对象中单个或多个属性的变化，基本语法格式如下：
Component({ observers: { // 监听 r 、 g 和 b 数据的变化 'rgb.r, rgb.g, rgb': function(r, g, b){ this.setData({ fullColor: `${r},${g},${b}` // 注意：这里反引号 }); } }, })
其中，触发该监听器有三种情况：
- 使用 setData 设置 this.data.rgb.r 时触发。
- 使用 setData 设置 this.data.rgb.g 时触发。
- 直接为对象赋值，使用 setData 设置 this.data.rgb 时触发。
下面通过一个栗子来了解一下，具体代码如下所示：
test2.wxml
<view>--------------------</view> <view>rgb颜色值： {{rgb.r}} {{rgb.g}} {{rgb.b}}</view> <button size="mini" bindtap="rN1">R+1</button> <button size="mini" bindtap="gN1">G+1</button> <button size="mini" bindtap="bN1">B+1</button>
test2.js
组件的 .js 文件，监听多个字段用逗号隔开即可。
Component({ /** * 组件的初始数据 */ data: { rgb: { r: 0, g: 0, b: 0 } }, /** * 组件的方法列表 */ methods: { rN1 (){ this.setData({'rgb.r': this.data.rgb.r + 1}); }, gN1 (){ this.setData({'rgb.g': this.data.rgb.g + 1}); }, bN1 (){ this.setData({'rgb.b': this.data.rgb.b + 1}); } }, observers: { 'rgb.r, rgb.g': function(r, g){ this.setData({ // fullColor: `${r},${g},${b}` sum: r + g }); } }, })
当点击按钮让 r 和 g 进行累加时，就会触发数据监听，从而更新 sum 值。而点击让 b 累加时，是不会触发数据监听的，可以来看一下运行效果：
总结
感谢观看，这里就是自定义组件 - 数据监听器的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
