W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
Component構(gòu)造器可用于定義組件,調(diào)用Component構(gòu)造器時可以指定組件的屬性、數(shù)據(jù)、方法等。
定義段 | 類型 | 是否必填 | 描述 | 最低版本 |
---|---|---|---|---|
properties | Object Map | 否 | 組件的對外屬性,是屬性名到屬性設(shè)置的映射表,屬性設(shè)置中可包含三個字段, type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應(yīng)函數(shù) | |
data | Object | 否 | 組件的內(nèi)部數(shù)據(jù),和 properties 一同用于組件的模板渲染 | |
observers | Object | 否 | 組件數(shù)據(jù)字段監(jiān)聽器,用于監(jiān)聽 | properties 和 data 的變化,參見 數(shù)據(jù)監(jiān)聽器 |
methods | Object | 否 | 組件的方法,包括事件響應(yīng)函數(shù)和任意的自定義方法,關(guān)于事件響應(yīng)函數(shù)的使用,參見 組件事件 | |
behaviors | String Array | 否 | 類似于mixins和traits的組件間代碼復(fù)用機制,參見 behaviors | |
created | Function | 否 | 組件生命周期函數(shù),在組件實例剛剛被創(chuàng)建時執(zhí)行,注意此時不能調(diào)用 setData ,參見 組件生命周期 | |
attached | Function | 否 | 組件生命周期函數(shù),在組件實例進入頁面節(jié)點樹時執(zhí)行,參見 組件生命周期 | |
ready | Function | 否 | 組件生命周期函數(shù),在組件布局完成后執(zhí)行,參見 組件生命周期 | |
moved | Function | 否 | 組件生命周期函數(shù),在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行,參見 組件生命周期 | |
detached | Function | 否 | 組件生命周期函數(shù),在組件實例被從頁面節(jié)點樹移除時執(zhí)行,參見 組件生命周期 | |
relations | Object | 否 | 組件間關(guān)系定義,參見 組件間關(guān)系 | |
externalClasses | String Array | 否 | 組件接受的外部樣式類,參見 外部樣式類 | |
options | Object Map | 否 | 一些選項(文檔中介紹相關(guān)特性時會涉及具體的選項設(shè)置,這里暫不列舉) | |
lifetimes | Object | 否 | 組件生命周期聲明對象,參見 組件生命周期 | |
pageLifetimes | Object | 否 | 組件所在頁面的生命周期聲明對象,支持頁面的 show 、 hide 等生命周期,參見 組件生命周期 | |
definitionFilter | Function | 否 | 定義段過濾器,用于自定義組件擴展,參見 自定義組件擴展 |
生成的組件實例可以在組件的方法、生命周期函數(shù)和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法。
屬性名 | 類型 | 描述 |
---|---|---|
is | String | 組件的文件路徑 |
id | String | 節(jié)點id |
dataset | String | 節(jié)點dataset |
data | Object | 組件數(shù)據(jù),包括內(nèi)部數(shù)據(jù)和屬性值 |
properties | Object | 組件數(shù)據(jù),包括內(nèi)部數(shù)據(jù)和屬性值(與 data 一致) |
方法名 | 參數(shù) | 描述 |
---|---|---|
setData | Object newData | 設(shè)置data并執(zhí)行視圖層渲染 |
hasBehavior | Object behavior | 檢查組件是否具有 behavior (檢查時會遞歸檢查被直接或間接引入的所有behavior) |
triggerEvent | String name, Object detail, Object options | 觸發(fā)事件,參見 組件事件 |
createSelectorQuery | 創(chuàng)建一個 SelectorQuery 對象,選擇器選取范圍為這個組件實例內(nèi) | |
selectComponent | String selector | 使用選擇器選擇組件實例節(jié)點,返回匹配到的第一個組件實例對象(會被 qq://component-export 影響) |
selectAllComponents | String selector | 使用選擇器選擇組件實例節(jié)點,返回匹配到的全部組件實例對象組成的數(shù)組 |
getRelationNodes | String relationKey | 獲取這個關(guān)系所對應(yīng)的所有關(guān)聯(lián)節(jié)點,參見 組件間關(guān)系 |
groupSetData | Function callback | 立刻執(zhí)行 callback ,其中的多個 setData 之間不會觸發(fā)界面繪制(只有某些特殊場景中需要,如用于在不同組件同時 setData 時進行界面繪制同步) |
代碼示例:
Component({
behaviors: [],
properties: {
myProperty: { // 屬性名
type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型)
value: '', // 屬性初始值(可選),如果未指定則會根據(jù)類型選擇一個
observer(newVal, oldVal, changedPath) {
// 屬性被改變時執(zhí)行的函數(shù)(可選),也可以寫成在methods段中定義的方法名字符串, 如:'_propertyChange'
// 通常 newVal 就是新設(shè)置的數(shù)據(jù), oldVal 是舊數(shù)據(jù)
}
},
myProperty2: String // 簡化的定義方式
},
data: {}, // 私有數(shù)據(jù),可用于模板渲染
lifetimes: {
// 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名
attached() { },
moved() { },
detached() { },
},
// 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名
attached() { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
ready() { },
pageLifetimes: {
// 組件所在頁面的生命周期函數(shù)
show() { },
hide() { },
resize() { },
},
methods: {
onMyButtonTap() {
this.setData({
// 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
})
},
// 內(nèi)部方法建議以下劃線開頭
_myPrivateMethod() {
// 這里將 data.A[0].B 設(shè)為 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange(newVal, oldVal) {
}
}
})
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: