All Products
Search
Document Center

Component object

Last Updated: Feb 04, 2021

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 1.14.0
deriveDataFromProps Function No Life cycle function of the component, triggered when the component creation starts and before the component is updated 1.14.0
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:

  1. Component({
  2. mixins:[{ didMount() {}, }],
  3. data: {y:2},
  4. props:{x:1},
  5. didUpdate(prevProps,prevData){},
  6. didUnmount(){},
  7. methods:{
  8. onMyClick(ev){
  9. my.alert({});
  10. this.props.onXX({ ...ev, e2:1});
  11. },
  12. },
  13. })
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.
  1. // /components/counter/index.axml
  2. <view>{{counter}}</view>
  3. <button onTap="plusOne">+1</button>
  1. // /components/counter/index.js
  2. Component({
  3. data: { counter: 0 },
  4. methods: {
  5. plusOne(e) {
  6. console.log(e);
  7. this.setData({ counter: this.data.counter + 1 });
  8. },
  9. },
  10. });

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:
  • props is an attribute passed from the external. Default properties can be specified and cannot be modified in the internal code of the custom component.
  • The props property can be directly referenced in axml of the custom component.
  • The events in axml of the custom component can only be responded to by the method in js methods of the custom component. To call the function passed by the parent component, use ‘this.props’ in methods.
  1. // /components/counter/index.js
  2. Component({
  3. data: { counter: 0 },
  4. // Sets default properties
  5. props: {
  6. onCounterPlusOne: (data) => console.log(data),
  7. extra: 'default extra',
  8. },
  9. methods: {
  10. plusOne(e) {
  11. console.log(e);
  12. const counter = this.data.counter + 1;
  13. this.setData({ counter });
  14. this.props.onCounterPlusOne(counter); // Events in axml can be responded to only by the method in methods.
  15. },
  16. },
  17. });

In the above code, props is used to set default properties, which can be obtained using this.props in the event handler.

  1. // /components/counter/index.axml
  2. <view>{{counter}}</view>
  3. <view>extra: {{extra}}</view>
  4. <button onTap="plusOne">+1</button>
  1. // /pages/index/index.json
  2. {
  3. "usingComponents": {
  4. "my-component": "/components/counter/index"
  5. }
  6. }

External does not pass props

  1. // /pages/index/index.axml
  2. <my-component />

Output on the page:

  1. 0
  2. extra: default extra
  3. +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.
  1. // /pages/index/index.js
  2. Page({
  3. onCounterPlusOne(data) {
  4. console.log(data);
  5. },
  6. });
  1. // /pages/index/index.axml
  2. <my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

Output on the page:

  1. 0
  2. extra: external extra
  3. +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:

  1. // /components/index/index.js
  2. Component({
  3. didMount(){
  4. this.$page.xxCom = this; // This operation mounts the component instance on the page instance to which the component belongs.
  5. console.log(this.is);
  6. console.log(this.$page);
  7. console.log(this.$id);
  8. }
  9. });
  1. <! -- /components/index/index.axml The component ID can be rendered in axml of the component.
  2. <view>{{$id}}</view>
  1. // /pages/index/index.json
  2. {
  3. "usingComponents": {
  4. "my-component": "/components/index/index"
  5. }
  6. }
  1. // /pages/index/index.js
  2. Page({
  3. onReady() {
  4. console.log(this.xxCom); // You can access the components mounted on the current page.
  5. },
  6. })

After the component is rendered on the page, the didMount callback is executed. The console output is as follows:

  1. /components/index/index
  2. {$viewId: 51, route: "pages/index/index"}
  3. 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.