Component object-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

This topic describes the parameters of a component object.

Component constructor

The following table describes the parameters.

Parameter	Type	Required	Description	Minimum version
data	Object	No	The internal state of the component.	-
props	Object	No	Sets default values for externally passed properties.	-
onInit	Function	No	A lifecycle function that is triggered when the component is created.	1.14.0
deriveDataFromProps	Function	No	A lifecycle function that is triggered when the component is created and before it is updated.	1.14.0
didMount	Function	No	A lifecycle function that is triggered after the component is mounted.	-
didUpdate	Function	No	A lifecycle function that is triggered after the component is updated.	-
didUnmount	Function	No	A lifecycle function that is triggered when the component is unmounted.	-
mixins	Array	No	A mechanism for code reuse between components.	-
methods	Object	No	Component methods. These can be event handlers or any custom functions.	-

Code example:

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

The onInit and deriveDataFromProps methods are supported only in base libraries of version 1.14.0 or later. Call my.canIUse('component2') to ensure compatibility.

methods

Custom components can render static data and respond to user click events. These events can then be processed to trigger a re-rendering of the component. Define all custom methods in the methods object.

Note

Unlike a Page, event handling functions for a custom component are defined in the methods object.

// /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 });
    },
  },
});

The page renders a button. Each time the button is clicked, the number on the page increases by 1.

props

Custom components can accept and process external input, and then notify the external source upon completion. You can use props to implement these actions.

Note

props are properties passed from an external source. You can specify default properties. Do not modify props within the code of the custom component.
You can directly reference props properties in the AXML file of the custom component.
Events in the AXML file of a custom component can only be handled by methods in the component's JS file. To call a function that is passed from the parent component, use this.props within a method.

// /components/counter/index.js
Component({
  data: { counter: 0 },
  // Set 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 only be handled by methods
    },
  },
});

In the preceding code, props sets the default properties. These properties are then accessed in the event handler using this.props.

// /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 use without passing props

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

Page output:

0
extra: default extra
+1

Because no parameters are passed, the page displays the default values that are set in the component's JS props.

External use passing props

Note

When you use a custom component externally, you must prefix any function parameter with on. Otherwise, the function is treated as a string.

// /pages/index/index.js
Page({
  onCounterPlusOne(data) {
    console.log(data);
  },
});

// /pages/index/index.axml
<my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

Page output:

0
extra: external extra
+1

Because parameters are passed, the page displays the externally passed value external extra.

Component instance properties

Property name	Type	Description
data	Object	Internal data of the component.
props	Object	Properties passed to the component.
is	String	Component path.
$page	Object	The page instance to which the component belongs.
$id	Number	Component ID. The value can be rendered directly in the component's AXML.

Code example:

// /components/index/index.js
Component({
  didMount(){
    this.$page.xxCom = this; // This operation mounts the component instance to its page instance
    console.log(this.is);
    console.log(this.$page);
    console.log(this.$id);
  }
});

<!-- /components/index/index.axml The component ID can be rendered directly in the component's AXML -->
<view>{{$id}}</view>

// /pages/index/index.json
{
  "usingComponents": {
    "my-component": "/components/index/index"
  }
}

// /pages/index/index.js
Page({
  onReady() {
    console.log(this.xxCom); // Access the component mounted on the current page
  },
})

After the component is rendered on the page, the didMount callback is executed. The console then outputs the following:

/components/index/index
{$viewId: 51, route: "pages/index/index"}
1

Component instance methods

Method name	Parameter	Description
setData	Object	Sets data to trigger view rendering.
$spliceData	Object	Sets data to trigger view rendering.

The usage is the same as that for a Page.