💌 所属专栏：【微信小程序开发教程】
😀 作 者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第34篇文章;
今天开始学习微信小程序的第18天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、数据监听器
前面已经学习自定义组件 - 数据、方法和属性，通过栗子了解到自定义组件中 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 累加时，是不会触发数据监听的，可以来看一下运行效果：
总结
感谢观看，这里就是自定义组件 - 数据监听器的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
文章来源：https://www.toymoban.com/news/detail-484546.html
- 😀 【LeetCode题解（持续更新中）】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记（华为云）】
- 🦄 【程序错误解决方法（建议收藏）】
- 🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！文章来源地址https://www.toymoban.com/news/detail-484546.html
到了这里，关于【微信小程序】-- 自定义组件 - 数据监听器 （三十四）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
