数据
在自定义组件中,数据都存放到data节点中
data: {
count:0
}
方法
事件处理函数和自定义方法均定义到methods节点中
<button bindtap="addCount">点击</button>
methods: {
addCount(){
this.setData({
count:this.data.count +1
})
this._showCount()
},
_showCount(){
wx.showToast({
title: 'title'+this.data.count,
icon:'none'
})
}
}
其中,addCount为事件处理函数,_showCount为自定义方法,建议自定义方法以_开头进行命名
属性
properies是组件的对外属性,用来接收外界给组件传递的数据
定义属性可以有两种方式:
简化版:
properties: {
min:Number //简化定义属性,不需要指定默认值
}
完整版:
properties: {
min:{
type:Number,//属性值的数据类型
value:5 //默认值
}
}
对于引用的自定义组件的外界界面,可以提供属性值
<my-test2 min="6"></my-test2>
data和properties的区别
在组件中,data和properties用法相同,都是可读可写的,不同点在于
- data趋向于存储组件的私有数据
- properties趋向于存储外界传递到组件的数据
数据监听器
数据监听器用于监听数据的变化,从来来做一些事情,数据监听器需要声明observers节点
直接上例子
<button bindtap="addNumber1">number1增加1</button>
<button bindtap="addNumber2">number2增加1</button>
<view>
n1:{
{n1}}+n2:{
{n2}}={
{sum}}
</view>
addNumber1(){
this.setData({
n1:this.data.n1+1
})
},
addNumber2(){
this.setData({
n2:this.data.n2+1
})
}
}
observers:{
'n1,n2':function(n1new,n2new){
this.setData({
sum:n1new+n2new
})
}
}