(3).properties属性 (父亲传数组给儿子)
在小程序组件中，properties是组件的对外属性，用来接受外界传递到组件的数据，实列实列代码如下
properties: { // 1. 第一种方式: 简化的方式->无法指定默认值 // max:Number, // 2. 第二种方式: 完整的定义方式 [当需要指定属性默认值时，建议使用此方式] max:{ type:Number, // 属性值的数据类型 value:10 // 属性默认值 } },
组件 test.js
// components/test/test.js Component({ // 隔离性 options:{ styleIsolation:'isolated' }, /** * 组件的属性列表 */ properties: { // 1. 第一种方式: 简化的方式->无法指定默认值 // max:Number, // 2. 第二种方式: 完整的定义方式 [当需要指定属性默认值时，建议使用此方式] max:{ type:Number, // 属性值的数据类型 value:10 // 属性默认值 } }, /** * 组件的初始数据 */ data: { count:0 }, /** * 组件的方法列表 */ methods: { // 1. 自增事件处理函数... addCount(){ if(this.data.count>=this.properties.max) return this.setData({ count:this.data.count+1 }) this._showCount(); }, _showCount(){ // 2. 提示框的操作 wx.showToast({ title: '点击按钮:'+ this.data.count, }) } } })
父home.wxml
<!--pages/home/home.wxml--> <text class="t1">首页</text> <my-test1 max="4"></my-test1>
(4).data和properties的区别
在小程序的组件中，properties属性和data数据的用法相同、它们都是可读可写的，只不过:
- data 更倾向于存储组件的私有数据。
- properties 更倾向于存储外界传递到组件中的数据。
- data和properties的引用地址时相同的…
(5).使用setData修改properties的值
由于data数据和properties属性在本质上没有任何区别，因此properties属性的值也可以用于页面的渲染，或使用setData为properties中的属性重新赋值。
// components/test/test.js Component({ // 隔离性 options:{ styleIsolation:'isolated' }, /** * 组件的属性列表 */ properties: { // 1. 第一种方式: 简化的方式->无法指定默认值 // max:Number, // 2. 第二种方式: 完整的定义方式 [当需要指定属性默认值时，建议使用此方式] max:{ type:Number, // 属性值的数据类型 value:10 // 属性默认值 } }, /** * 组件的初始数据 */ data: { count:0 }, /** * 组件的方法列表 */ methods: { // 1. 自增事件处理函数... addCount(){ this.setData({ count:this.data.count+1, max:this.properties.max+1 }) this._showCount(); }, _showCount(){ // 2. 提示框的操作 wx.showToast({ title: '点击按钮:'+ this.data.count, }) } } })
4.自定义组件- 数据监听器
(1).什么是数据监听器
数据监听器用途用于监听和响应任何数据字段的变化，从而执行特定的操作。它的作用类似于Vue中的watch侦听器。在小程序组件中。
(2).数据监听器的基本用法
1. 在components新建一个文件夹 2. 在这个新建的文件夹中引入compoents 3. 在app.json文件中配置注册 新建的这个组件 4. 在app.wxml文件中使用我们新建的这个组件
test2.js
初始化数据并设置监听的方法
/** * 组件的监听器-> 假如说监听的数据发生了变化，那么就会触发这个事件 */ observers:{ 'n1,n2':function(newN1,newN2){ // 左边是监听的数据，右侧是方法(监听到的新值) this.setData({ sum:newN2+newN1 }) } }
// components/test2/test2.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(newN1,newN2){ // 左边是监听的数据，右侧是方法(监听到的新值) this.setData({ sum:newN2+newN1 }) } } })
test2.wxml
<!--components/test2/test2.wxml--> <view> {{n1}}+{{n2}}={{sum}} </view> <button bindtap="addN1">n1+1</button> <button bindtap="addN2">n2+1</button>
(3).监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化。
Component({ obervers:{ '对象.属性1，对象.属性2':function(新属性A的值，新属性B的值){ // 事件触发的三种情况 1. 属性A的值发生了变化 2. 属性B的值发生了变化 3. 直接为整个对象发生了变化 } } })
(4).自定义监听器的 - 案列
注意点: 假如我们data区域的是对象。我们想要给对象里的某一个属性赋值:我们需要用单引号括起来
this.setData({ '对象.属性名1': })
test3.js
// components/test3/test3.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { rgb:{ r:0, g:0, b:0 }, fullColor:'0,0,0' }, observers:{ 'rgb.r,rgb.g,rgb.b':function(newR,newG,newB){ this.setData({ fullColor:newR+','+newG+','+newB }) } }, /** * 组件的方法列表 */ methods: { changeR(){ if(this.data.rgb.r>255) return this.setData({ 'rgb.r':this.data.rgb.r+10 }) }, changeG(){ if(this.data.rgb.g>255) return this.setData({ 'rgb.g':this.data.rgb.g+10 }) }, changeB(){ if(this.data.rgb.b>255) return console.log() this.setData({ 'rgb.b':this.data.rgb.b+10 }) } } })
test3.wxml
<!--components/test3/test3.wxml--> <view style="background-color: rgb({{fullColor}}); width: 100%;height: 300rpx"> </view> <view>0 背景颜色的RGB值为: {{fullColor}} </view> <view style="text-align: center;margin-top: 45rpx;"> <button type="default" size="mini" bindtap="changeR">R</button> <button type="primary" size="mini" bindtap="changeG">G</button> <button type="warn" size="mini" bindtap="changeB">B</button> </view>
(5).监听对象中所有属性的变化
如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中的所有属性的变化:
我们在使用欸都时候，需要用到通配符和反引号
observers:{ 'rgb.**':function(obj){ this.setData({ fullColor:`${obj.r},${obj.g},${obj.b}` }) } },
