Uno, datos, métodos y propiedades.
1. datos datos
En el componente del subprograma, los datos privados utilizados para la representación de la plantilla del componente deben definirse en el nodo de datos:
2. método de métodos
En los componentes del subprograma, los controladores de eventos y los métodos personalizados deben definirse en el nodo de métodos
在组件的 .json 文件中新增如下配置
{
"styleIsolation":"isolated"
}
// components/test/test.js
Component({
// 组件的初始数据
data: {
count:
},
})
methods: {
//组件的方法列表【包含事件处理函数和自定义方法】
addCount() {
//事件处理函数
this.setData({
count: this.data.count + 1})
this._showCount() //通过this 直接调用自定义方法
}
},
_showCount(){
//自定义方法建议以_开头
wx.showToast({
title:'count值为：' + this.data.count,
icon:'none'
})}
})
<view>
count的值是：{
{count}}
</view>
<button bindtap="addCount">+1</button>
3. atributo de propiedades
En el componente de applet, las propiedades son las propiedades externas del componente, que se utilizan para recibir los datos pasados al componente desde el mundo exterior.
4. La diferencia entre datos y propiedades
En los componentes del applet, el atributo de propiedades y los datos de datos se utilizan de la misma manera, se pueden leer y escribir, pero los datos tienden más a almacenar los datos privados del componente y las propiedades tienden a almacenar los datos. pasado al componente desde el mundo exterior
// components/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
max: {
// 完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
type:Number, //属性值的数据类型
value:10 //属性默认值
},
max:Number //简化定义属性的方式【不需要指定属性默认值时，可以使用简化方式】
}
})
<my-test1 max="10"></my-test1>
// components/test/test.js
Component({
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. Use setData para modificar el valor de las propiedades
Dado que, en esencia, no hay diferencia entre los datos de datos y el atributo de propiedades, el valor del atributo de propiedades también se puede usar para representar la página, o usar setData para reasignar las propiedades en las propiedades, y usar el valor del atributo de propiedades en el .wxml del componente
en el componente
1 <view>max属性的值为：{
{max}}</view>
// components/test/test.js
Component({
/**
* 组件的属性列表
*/
properties: {
max: {
// 第二种完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
type:Number, //属性值的数据类型
value:10 //属性默认值
},
max:Number //第一种，简化定义属性的方式【不需要指定属性默认值时，可以使用简化方
式】
},
/**
* 组件的方法列表
*/
methods: {
//组件的方法列表【包含事件处理函数和自定义方法】
addCount() {
//事件处理函数
if(this.data.count >= this.properties.max) return
this.setData({
count: this.data.count + 1,
max:this.properties.max +
})
this._showCount() // 通过this 直接调用自定义方法
},
_showCount(){
// 自定义方法建议以 _开头
wx.showToast({
title:'count值为：' + this.data.count,
icon:'none'
})
},
showInfo() {
console.log(this.data);
console.log(this.properties);
console.log(this.data === this.properties);
}