Component constructor
Description
Field | Type | Mandatory | Description | Minimum version |
data | Object | No | Internal status of the component | |
props | Object | No | Sets default values for external data | |
onInit | Function | No | Life cycle function of the component, triggered when the component creation starts | |
deriveDataFromProps | Function | No | Life cycle function of the component, triggered when the component creation starts and before the component is updated | |
didMount | Function | No | Life cycle function of the component, triggered when the component creation completes | |
didUpdate | Function | No | Life cycle function of the component, triggered when the component is updated | |
didUnmount | Function | No | Life cycle function of the component, triggered when the component is deleted | |
mixins | Array | No | Code reuse mechanism between components | |
methods | Object | No | Method of the component, which can be an event response function or any custom method |
Code sample:
Component({
mixins:[{ didMount() {}, }],
data: {y:2},
props:{x:1},
didUpdate(prevProps,prevData){},
didUnmount(){},
methods:{
onMyClick(ev){
my.alert({});
this.props.onXX({ ...ev, e2:1});
},
},
})
Note: onInit
and deriveDataFromProps
apply to basic library 1.14.0 and later versions. You can use my.canIUse('component2')
to implement compatibility.
methods
A custom component can not only render static data, but also respond to user click events, which processes and triggers the custom component to re-render. Any custom method can be defined in methods.
Note: Unlike pages, custom components need to define the event handling function in methods.
// /components/counter/index.axml
<view>{{counter}}</view>
<button onTap="plusOne">+1</button>
// /components/counter/index.js
Component({
data: { counter: 0 },
methods: {
plusOne(e) {
console.log(e);
this.setData({ counter: this.data.counter + 1 });
},
},
});
A page renders a button. The number of the page increases by 1 each time you tap the button.
props
The custom component can accept input from the external. After the component processes the input, it notifies the external that the work is done. These can be implemented using props.
Notes:
// /components/counter/index.js
Component({
data: { counter: 0 },
// Sets default properties
props: {
onCounterPlusOne: (data) => console.log(data),
extra: 'default extra',
},
methods: {
plusOne(e) {
console.log(e);
const counter = this.data.counter + 1;
this.setData({ counter });
this.props.onCounterPlusOne(counter); // Events in axml can be responded to only by the method in methods.
},
},
});
In the above code, props is used to set default properties, which can be obtained using this.props
in the event handler.
// /components/counter/index.axml
<view>{{counter}}</view>
<view>extra: {{extra}}</view>
<button onTap="plusOne">+1</button>
// /pages/index/index.json
{
"usingComponents": {
"my-component": "/components/counter/index"
}
}
External does not pass props
// /pages/index/index.axml
<my-component />
Output on the page:
0
extra: default extra
+1
No parameters are passed. Therefore, the page displays the default value set by props in js of the component.
External passes props
Note: When the external uses a custom component, if the passed parameter is a function, the parameter must be prefixed with on
. Otherwise, it will be processed as a string.
// /pages/index/index.js
Page({
onCounterPlusOne(data) {
console.log(data);
},
});
// /pages/index/index.axml
<my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />
Output on the page:
0
extra: external extra
+1
A parameter is passed. Therefore, the page displays the extra value passed externally, which is external extra
.
Component instance properties
Property | Type | Description |
data | Object | Internal data of the component |
props | Object | Properties passed to the component |
is | String | Component path |
$page | Object | Page instance to which the component belongs |
$id | Number | Component ID, which can be rendered in axml of the component |
Code sample:
// /components/index/index.js
Component({
didMount(){
this.$page.xxCom = this; // This operation mounts the component instance on the page instance to which the component belongs.
console.log(this.is);
console.log(this.$page);
console.log(this.$id);
}
});
<! -- /components/index/index.axml The component ID can be rendered in axml of the component.
<view>{{$id}}</view>
// /pages/index/index.json
{
"usingComponents": {
"my-component": "/components/index/index"
}
}
// /pages/index/index.js
Page({
onReady() {
console.log(this.xxCom); // You can access the components mounted on the current page.
},
})
After the component is rendered on the page, the didMount
callback is executed. The console output is as follows:
/components/index/index
{$viewId: 51, route: "pages/index/index"}
1
Component instance method
Method | Field | Description | Minimum version |
setData | Object | Sets data to trigger view render | - |
$spliceData | Object | Sets data to trigger view render | - |
The usage is same as that in Page.