• 💌 所屬專欄：【微信小程序開發教程】

• 😀 作??者：我是夜闌的狗🐶

• 🚀 個人簡介：一個正在努力學技術的CV工程師，專注基礎和實戰分享 ，歡迎咨詢！

• 💖 歡迎大家：這里是CSDN，我總結知識的地方，喜歡的話請三連，有問題請私信 😘 😘 😘

文章目錄

• 前言
• 一、數據監聽器
• • • 1、什么是數據監聽器
    • 2、數據監聽器的基本用法
    • 3、監聽對象屬性的變化
• 總結

---

前言

??大家好，又見面了，我是夜闌的狗🐶，本文是專欄【微信小程序開發教程】專欄的第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 累加時，是不會觸發數據監聽的，可以來看一下運行效果：

---

總結

??感謝觀看，這里就是自定義組件 - 數據監聽器的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。🌹 🌹 🌹

??也歡迎你，關注我。👍 👍 👍

??原創不易，還希望各位大佬支持一下，你們的點贊、收藏和留言對我真的很重要！！！💕 💕 💕 最后，本文仍有許多不足之處，歡迎各位認真讀完文章的小伙伴們隨時私信交流、批評指正！下期再見。🎉

更多專欄訂閱:

• 😀 【LeetCode題解（持續更新中）】
• 🚝 【Java Web項目構建過程】
• 💛 【微信小程序開發教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數據學習筆記（華為云）】
• 🦄 【程序錯誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會看到更多的優質內容！！

總結

以上是生活随笔為你收集整理的【微信小程序】-- 自定义组件 - 数据监听器 （三十四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。