Component({
behaviors: [],
// 屬性定義(詳情參見下文)
properties: {
myProperty: { // 屬性名
type: String,
value: ''
},
myProperty2: String // 簡化的定義方式
},
data: {}, // 私有數據,可用於模板渲染
lifetimes: {
// 生命週期函數,可以爲函數,或一個在methods段中定義的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命週期函數,可以爲函數,或一個在methods段中定義的方法名
attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
ready: function() { },
pageLifetimes: {
// 組件所在頁面的生命週期函數
show: function () { },
hide: function () { },
resize: function () { },
},methods: {
onMyButtonTap: function(){
this.setData({
// 更新屬性和數據的方法與更新頁面數據的方法類似
})
},
// 內部方法建議以下劃線開頭
_myPrivateMethod: function(){
// 這裏將 data.A[0].B 設爲 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
properties和data中的屬性值都可以用來在頁面使用{{ }}來綁定 ,但是在properties,可以在使用組件的父頁面傳值進去
options: {
multipleSlots: true // 在組件定義時的選項中啓用多slot支持
},
externalClasses: ['custom-class', 'my-refresh-view'],
組件外部傳遞樣式進去,覆蓋原有的默認樣式
methods中的方法爲響應當前組件中的方法
// 內部方法建議以下劃線開頭
_myPrivateMethod: function(){
// 這裏將 data.A[0].B 設爲 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange: function(newVal, oldVal) {
}
observer: function(newVal, oldVal) {
// 屬性值變化時執行
}
爲屬性中的值變化的時候的監聽函數,類似於vue中的watch ,記住一定不能在當前屬性的observer中去setData,會造成死循環的。
在組件內部可以直接使用this.properties.myproperty,然後根據該屬性進行一些判斷