微信小程序自定义组件—

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

Component({observers: {'字段A,字段B':function(字段A的新值,字段B的新值){// 要进行的操作}},
})

2.用法：以一个简单的加法为例

首先我们在组件UI中这样定义：

<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="AddN1">+1</button>
<button bindtap="AddN2">+1</button>

然后在组件.js文件中这样写：

Component({/*** 组件的初始数据*/data: {n1:0,n2:0,sum:0},/*** 组件的方法列表*/methods: {AddN1(){this.setData({n1: this.data.n1 + 1})},AddN2(){this.setData({n2: this.data.n2 + 1})},},observers:{'n1,n2':function(New1,New2){   //监听n1,n2的数据变化this.setData({sum: New1 + New2  //通过监听器，自动计算sum的变化})}}
})

最后在页面中通过标签的方式调用：

<my-test></my-test>

效果如下图：

3.监听对象中属性的变化

当要监听的对象中的属性时，用法其实也类似：

数据监听器的基础知识就这么多了，最后附上一个小案例，通过按钮来改变颜色

4.案例

首先新建一个文件，这里以test2为例，然后通过新建Component一键生成文件

组件的UI代码如下：

<view style="background-color: rgb({{fullcolor}});" class="box">颜色是：{{fullcolor}}</view>
<button size="mini" type="default" bindtap="changeR">R</button>
<button size="mini" type="primary" bindtap="changeG">G</button>
<button size="mini" type="warn" bindtap="changeB">B</button>

组件样式代码：

.box{line-height: 200px;color: #fff;text-align: center;font-size: 24rpx ;text-shadow: 0rpx 0rpx 2rpx black;
}

组件的js代码：

// component/test2/test2.js
Component({/*** 组件的属性列表*//*** 组件的初始数据*/data: {rgb: {r: 0,g: 0,b: 0},fullcolor: '0,0,0'},/*** 组件的方法列表*/methods: {randomColor() {this.setData({rgb: {r: Math.floor(Math.random() * 256),g: Math.floor(Math.random() * 256),b: Math.floor(Math.random() * 256)}})},changeR() {this.setData({'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5})},changeG() {this.setData({'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5})},changeB() {this.setData({'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5})}},observers: {'rgb.**': function (obj) {this.setData({fullcolor: `${obj.r},${obj.g},${obj.b}`})},},pageLifetimes: {show() {this.randomColor()}}
})

最后在页面中通过标签使用

<test2></test2>

效果如下：

可以通过R、G、B三个按钮改变上面view的颜色

微信小程序自定义组件——数据监听器相关推荐

微信小程序自定义组件数据、方法和属性
一 data 数据在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中,示例如下. Component({ /** * 组件的初始数据 */ data: { count: 0 } ...
微信小程序自定义组件-树形数据表格（进阶版）
前言一.下载引用二.使用treegrid组件三.使用文档属性事件四.组件源码利用递归思想编写的表格行--treegrid-treeline 树形表格--treegrid-treegrid ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...
小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下微信小程序自定义组件微信小程序支持自定义组件下方的目录其中,components为组件目录,nodemodule ...

微信小程序自定义组件——数据监听器

微信小程序自定义组件——数据监听器相关推荐

最新文章

热门文章