更新時間:2023年11月06日15時31分 來源:傳智教育 瀏覽次數(shù):
1. data 數(shù)據(jù)
在小程序組件中,用于組件模板渲染的私有數(shù)據(jù),需要定義到 data 節(jié)點中,示例如下:
Component({ /** *組件的初始數(shù)據(jù) */ data: { count: O } })
2. methods 方法
在小程序組件中,事件處理函數(shù)和自定義方法需要定義到 methods 節(jié)點中,示例代碼如下:
Component({ methods:{ //組件的方法列表【包含事件處理函數(shù)和自定義方法】 addCount(){//事件處理函數(shù) this.setData({ count: this.data.count + 1 }) this._showCount()// 通過 this 直接調(diào)用自定義方法 }, _showCount(){ //自定義方法建議以_開頭 wx.showToast({ title:'count值為:'+this.data.count, icon: 'none' }) } } })3. properties 屬性
在小程序組件中,properties 是組件的對外屬性,用來接收外界傳遞到組件中的數(shù)據(jù),示例代碼如下:
Component({ //屬性定義 properties: { max:{ //完整定義屬性的方式【當需要指定屬性默認值時,建議使用此方式】 type:Nknber,//屬性值的數(shù)據(jù)類型 value: 10 //屬性默認值 }, max: Number //簡化定義屬性的方式【不需指定屬性默認值時,可以使用簡化方式】 } }) <my-test1 max="10"></my-test1>
4. data 和 properties 的區(qū)別
在小程序的組件中,properties 屬性和 data 數(shù)據(jù)的用法相同,它們都是可讀可寫的,只不過:
data 更傾向于存儲組件的私有數(shù)據(jù)。
properties 更傾向于存儲外界傳遞到組件中的數(shù)據(jù)。
Component({ methods: { showInfo(){ consale.log(this.data) //輸出結果:{count:0,max:10} console.log(this.properties) //輸出結果:{count:0,max:10} //結果為 true,證明 data數(shù)據(jù)和properties屬性【在本質上是一樣的、都是可讀可寫的】 console.log(this.data === this.properties) } } })
5. 使用 setData 修改 properties 的值
由于 data 數(shù)據(jù)和 properties 屬性在本質上沒有任何區(qū)別,因此 properties 屬性的值也可以用于頁面渲染,或使用 setData 為 properties 中的屬性重新賦值,示例代碼如下:
//在組件的.wxml 文件中使用properties 屬性的值 <view>max屬性的值為:{{max}}</view> Component({ properties:{max:Number },//定義屬性 methods:{ addCount() { this.setData({max:this.properzies.max+1 })//使用 setData修改屬性的值 } } })