1 つ、データ、メソッド、およびプロパティ
1.データデータ
アプレット コンポーネントでは、コンポーネント テンプレートのレンダリングに使用されるプライベート データをデータ ノードで定義する必要があります。
2. メソッド メソッド
アプレット コンポーネントでは、メソッド ノードでイベント ハンドラとカスタム メソッドを定義する必要があります。
在组件的 .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.プロパティ属性
アプレット コンポーネントでは、プロパティはコンポーネントの外部プロパティであり、外部からコンポーネントに渡されるデータを受け取るために使用されます。
4. データとプロパティの違い
アプレットのコンポーネントでは、プロパティ属性とデータ データは同じように使用され、読み取りと書き込みの両方が可能ですが、データはコンポーネントのプライベート データを保存する傾向があり、プロパティはデータを保存する傾向がより強いです。外部からコンポーネントに渡される
// 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. setData を使用してプロパティの値を変更する
データ data と properties 属性に本質的な違いはないため、properties 属性の値をページのレンダリングに使用することも、setData を使用してプロパティ内のプロパティを再割り当てし、プロパティ属性の値を使用することもできます。コンポーネントの .wxml
コンポーネントで
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);
}