Constructor
Constructor
Parameter Description
Parameter | Type | Mandate or not | Description |
data | Object | No | Component internal status |
props | Object | No | set default for incoming data |
onInit | Function | No | component lifecycle function, trigger on component creation |
deriveDataFromProps | Function | No | component lifecycle function, trigger on component creation and update |
didMount | Function | No | component lifecycle function, trigger on component creation completion |
didUpdate | Function | No | component lifecycle function, trigger on component update completion |
didUnmount | Function | No | component lifecycle function, trigger on component deletion |
mixins | Array | No | code reuse mechanism between components |
methods | Object | No | component method, can be event response function or any customized method |
Sample Code
js sample code:
copy
Component({
mixins:[{ didMount() {}, }],
data: {y:2},
props:{x:1},
didUpdate(prevProps,prevData){},
didUnmount(){},
methods:{
onMyClick(ev){
my.alert({});
this.props.onXX({ ...ev, e2:1});
},
},
})
Component Instance Attribute List
Parameter Description
Attribute name | Type | Description |
data | Object | Component internal data |
props | Object | incoming component attribute |
is | String | component path |
$page | Object | component page instance |
$id | Number | component id, can render value in component axml |
Sample Code
js sample code:
copy
// /components/xx/index.js
Component({
didMount(){
this.$page.xxCom = this; // this operation can load the component instance to the belonging page instance
console.log(this.is);
console.log(this.$page);
console.log(this.$id);
}
});
axml sample code:
copy
<!-- /components/xx/index.axml component id can directly render value in component axml -->
<view>{{$id}}</view>
json sample code:
copy
// /pages/index/index.json
{
"usingComponents": {
"xx": "/components/xx/index"
}
}
js sample code:
copy
Page({
onReady() {
console.log(this.xxCom); // can access all loaded components loaded onto the current page
},
})
When the component is rendered on the page, execute the didMount callback, and the console has the following output:
copy
/components/xx/index
{$viewId: 51, route: "pages/index/index"}
1
Component Instance Method List
Method name | Parameter | Descrsiption |
setData | Object | Setting data triggers view rendering |
$spliceData | Object | Setting data triggers view rendering |