自定义组件③数据、方法和属性-微信小程序开发(二十)
1. data 数据
在小程序组件中,用于组件模板渲染的私有数据,需要定义到 data 节点中,示例如下:
Component({
/**
* 组件的初始数据
*/
data: {
count:0
}
})
2. methods 方法
在小程序组件中,事件处理函数和自定义方法需要定义到 methods 节点中,示例代码如下:
Component({
/**
* 组件的方法列表
*/
methods: {
addCount(){ //事件处理函数
this.setData({count:this.data.count+1})
this._showCount() //通过 this 直接调用自定义方法
},
_showCount(){ //自定义方法建议以 _ 开头
wx.showToast({
title: 'count的值为:'+this.data.count,
icon:'none'
})
}
}
})
3. properties 属性
在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据,示例代码如下:
Component({
/**
- 组件的属性定义列表
*/
properties: {
max:{ //完整定义属性的方式【当需要指定属性默认值时,建议使用此方式】
type:Number, //属性值的数据类型
value:10 //属性默认值
},
max:Number //简化定义属性的方式【不需要指定属性默认值时,可以使用简化方式】
}
})
###4. data 和 properties 的区别
在小程序的组件中,properties 属性和 data 数据的用法相同,它们都是可读可写的,只不过:
⚫ data 更倾向于存储组件的私有数据
⚫ properties 更倾向于存储外界传递到组件中的数据
Component({
methods: {
showInfo(){
console.log(this.data) //输出结果:{count:0,max:10}
console.log(this.properties) //输出结果:{count:0,max:10}
//结果为true,证明data数据和properties属性【在本质上是一样的,都是可读可写的】
console.log(this.data === this.properties)
}
})
5. 使用 setData 修改 properties 的值
由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,
或使用 setData 为 properties 中的属性重新赋值,示例代码如下:
//在组件的 .wxml 文件中使用 properties 属性的值
<view>max属性的值为:{{max}}</view>
Component({
properties:{max:Number},//定义属性
methods: {
addCount(){
this.setData({max:this.properties.max+1}) //使用setData 修改属性的值
}
}
})