Long time no see, somehow I find something I should write down so that I may get started quickly next time.
This is the doc
Focus
- Structure of the constructor
- The Data Streaming of comps
- Lifetime of comps
- eg and some points
Structure
- Using pubic behavior(Optional)
behaviors: [myBehavior]
Not only in comps, but also in every behaviors.
what is behavior
If want to DIY the export of component or whatever, you could use
內(nèi)置behaviorlike wx://component-export which just like a plug-in
- State private data and inherited property from father page
//in comp
properties: {
myProperty: {
type: String
}
},
data: {
myData: 'my-component-data'
},
//in page.html
<my-component myProperty="Initial Value"/>
- LifeTime function
reated attached detached
Note that the behavior life time has a higer level than the component
組件實(shí)例剛剛被創(chuàng)建好時(shí)魏保， created 生命周期被觸發(fā)栽惶。此時(shí)裸卫，組件數(shù)據(jù) this.data 就是在 Component 構(gòu)造器中定義的數(shù)據(jù) data 佃牛。 此時(shí)還不能調(diào)用 setData 。 通常情況下匙铡，這個(gè)生命周期只應(yīng)該用于給組件 this 添加一些自定義屬性字段鹃答。
在組件完全初始化完畢蜕衡、進(jìn)入頁(yè)面節(jié)點(diǎn)樹后， attached 生命周期被觸發(fā)规阀。此時(shí)恒序， this.data 已被初始化為組件的當(dāng)前值。這個(gè)生命周期很有用谁撼，絕大多數(shù)初始化工作可以在這個(gè)時(shí)機(jī)進(jìn)行。
在組件離開頁(yè)面節(jié)點(diǎn)樹后滋饲， detached 生命周期被觸發(fā)厉碟。退出一個(gè)頁(yè)面時(shí)，如果組件還在頁(yè)面節(jié)點(diǎn)樹中屠缭，則 detached 會(huì)被觸發(fā)
- methods
No need to say
Example
// my-component.js
const app = getApp()
var myBehavior = require('my-behavior')
Component({
// 若需要自定義 selectComponent 返回的數(shù)據(jù)箍鼓，可使用內(nèi)置 behavior: wx://component-export 從基礎(chǔ)庫(kù)版本 2.2.3 開始提供支持。
//the diy value export to outside
// behaviors: ['wx://component-export'],
// export: function() {
// return { key1: 'I from comp' }
// },
//pubic code
behaviors: [myBehavior],
// state the property sent from page.html
properties: {
myProperty: {
type: String
}
},
//private property
data: {
myData: 'my-component-data'
},
//lifetime func
created: function () {
console.log('[my-component] created')
},
attached: function () {
console.log('[my-component] attached')
this.setData({
myData: app.globalData.globalMsg
})
// let msg = app.globalData.globalMsg
// console.log("Get data from global: "+msg)
},
ready: function () {
console.log('[my-component] ready')
},
//the methods you can bind in component.wxml
methods: {
myMethod: function () {
console.log('[my-component] log by myMethod')
let msg = 'I am details from methods of comp'
//this would bind in page.html
this.triggerEvent("ringComp",msg)
},
outputmethod(){
console.log('now is called from comp and my private data is'+this.data.myData)
}
},
})
//in page.html
<view>
<my-component id= 'the-id' my-behavior-property="behavior-property" my-property="my-property" bindringComp="typerComp" bindringBehavior="typerBeha">
<button bindtap="typerSlot">this is a slot</button>
</my-component>
</view>
//in page.js
typerSlot(){//bind to the button in slot
let that = this.selectComponent('#the-id')
console.log(that)//get this from component
this.selectComponent('#the-id').outputmethod()//Execute the method inside
},
Data Streaming
