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

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

• 🚀 個人簡介：一個正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實(shí)戰(zhàn)分享 ，歡迎咨詢！

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

文章目錄

• 前言
• 一、數(shù)據(jù)監(jiān)聽器
• • • 1、什么是數(shù)據(jù)監(jiān)聽器
    • 2、數(shù)據(jù)監(jiān)聽器的基本用法
    • 3、監(jiān)聽對象屬性的變化
• 總結(jié)

---

前言

??大家好，又見面了，我是夜闌的狗🐶，本文是專欄【微信小程序開發(fā)教程】專欄的第34篇文章;
??今天開始學(xué)習(xí)微信小程序的第18天💖💖💖，開啟新的征程，記錄最美好的時刻🎉，每天進(jìn)步一點(diǎn)點(diǎn)。
??專欄地址：【微信小程序開發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開發(fā)過程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴😉😉。
??如果文章有什么需要改進(jìn)的地方還請大佬不吝賜教👏👏。

---

一、數(shù)據(jù)監(jiān)聽器

??前面已經(jīng)學(xué)習(xí)自定義組件 - 數(shù)據(jù)、方法和屬性，通過栗子了解到自定義組件中 data 屬性 和 methods 方法的使用，以及 data 和 properties 的區(qū)別。接下來就來講解一下另外一個自定義組件 - 數(shù)據(jù)監(jiān)聽器。話不多說，讓我們原文再續(xù)，書接上回吧。

1、什么是數(shù)據(jù)監(jiān)聽器

??數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于 vue 中的 watch 偵聽器。在小程序組件中，數(shù)據(jù)監(jiān)聽器的基本語法格式如下：

Component({observers: {'n1, n2': function(n1, n2){this.setData({sum: n1 + n2})}}, })

??其中 n1，n2 為監(jiān)聽字段，形參n1，n2也是前面字段的新值。

2、數(shù)據(jù)監(jiān)聽器的基本用法

??了解到數(shù)據(jù)監(jiān)聽語法之后，通過下面的栗子來學(xué)習(xí)一下，首先對組件進(jìn)行全局引用，具體代碼如下所示：

app.json

{"usingComponents":{"my-test1": "/components/test1/test1","my-test2": "/components/test2/test2"}, }

test2.wxml

??組件的 UI 結(jié)構(gòu)如下：

<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 文件，監(jiān)聽多個字段用逗號隔開即可。

Component({/*** 組件的初始數(shù)據(jù)*/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: {// 監(jiān)聽 num1 和 num2 數(shù)據(jù)的變化'num1, num2': function(newnum1, newnum2){// 通過監(jiān)聽器自動計算 sum 的值this.setData({sum: newnum1 + newnum2});}}, })

message.wxml

??使用 my-test2 組件。

<my-test2></my-test2>

??此時當(dāng)點(diǎn)擊按鈕讓屬性 num1 或者 num2 自加時，就會觸發(fā)數(shù)據(jù)監(jiān)聽器，從而計算出 sum 的值，可以來看一下運(yùn)行效果：

3、監(jiān)聽對象屬性的變化

??前面只對單個數(shù)據(jù)進(jìn)行了監(jiān)聽，此外數(shù)據(jù)監(jiān)聽器還支持監(jiān)聽對象中單個或多個屬性的變化，基本語法格式如下：

Component({observers: {// 監(jiān)聽 r 、 g 和 b 數(shù)據(jù)的變化'rgb.r, rgb.g, rgb': function(r, g, b){this.setData({fullColor: `${r},${g},${b}` // 注意：這里反引號});}}, })

??其中，觸發(fā)該監(jiān)聽器有三種情況：

• 使用 setData 設(shè)置 this.data.rgb.r 時觸發(fā)。
• 使用 setData 設(shè)置 this.data.rgb.g 時觸發(fā)。
• 直接為對象賦值，使用 setData 設(shè)置 this.data.rgb 時觸發(fā)。

??下面通過一個栗子來了解一下，具體代碼如下所示：

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 文件，監(jiān)聽多個字段用逗號隔開即可。

Component({/*** 組件的初始數(shù)據(jù)*/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});}}, })

??當(dāng)點(diǎn)擊按鈕讓 r 和 g 進(jìn)行累加時，就會觸發(fā)數(shù)據(jù)監(jiān)聽，從而更新 sum 值。而點(diǎn)擊讓 b 累加時，是不會觸發(fā)數(shù)據(jù)監(jiān)聽的，可以來看一下運(yùn)行效果：

---

總結(jié)

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

??也歡迎你，關(guān)注我。👍 👍 👍

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

更多專欄訂閱:

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

訂閱更多，你們將會看到更多的優(yōu)質(zhì)內(nèi)容！！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。