mPaaS Component Syntax and Lifecycle Principles Explained - Mobile Platform as a Service - Alibaba Cloud - Mobile Platform as a Service

Components follow the same basic syntax as cards, with additional support for props declarations, lifecycle methods, and parent-child event communication.

Component development

The basic syntax is the same as the card development syntax.

If you use requireModule('animation') in a component's JS code, the animation is overwritten when the component's caller also uses this built-in JS module.

Note

This issue will be resolved in a future version of the DPI engine.

Property declaration (props)

Use props to declare properties that can be modified externally. Properties not declared in props cannot be modified externally.

props: {
  author: {    
    default: function () {
      return { name: 'name' }  // The default value is a JSON object. The key is name and the value is 'name'.
    }
},

props: {
  author: {    
	    default: "name" // The default value is the string 'name'.
  }
},

props: {
	author: {}  // The default value is undefined.
}

props: [ 'name', 'title' ]; // Both name and title are undefined.

Important

Only the four syntax formats for props are supported.
If the props syntax is incorrect, the card cannot pass data to the component. Properties on the component node in the card will not take effect.
If a property on a component node is not declared in the component's props, the property is invalid.
A component's data comes from three sources: external input (properties on the component node within the card), default values defined in props, and data in the data segment. The priority is data > external input > props default value. These three data sources are merged. Fields with the same name are overwritten.

Lifecycle

A component lifecycle has four stages:

beforeCreate: Executed before the component is created.
onCreated: Executed after the component is created. At this stage, only the JavaScript part is initialized and the component has not yet rendered to the screen.
onUpdated: Called when props are updated. The parameters are the changed field and its new value.
onDestroyed: Called before the component is destroyed. Implement this method to release any resources held by the component.

Important

onCreated: Similar to the onCreated lifecycle method of a card. The call order is: onCreated of the child component > onCreated of the parent component > onCreated of the card (if components are nested).
onDestroyed: Called directly when a component node is destroyed by vif or vfor logic. If a component is destroyed because a card is released, the call order is: onDestroyed of the child component > onDestroyed of the parent component > onDestroyed of the card (if components are nested).

Using components

Syntax

The following example uses the Button component.

<Button :title="title" @buttonClicked="onButtonClicked"><Button>

Note

Only vif, vfor, props, and event can be attached to a component node.

Component notifications to a card (child to parent)

Use the emit method to send an event from a component to its parent card. For example, if a component emits a buttonClicked event, listen for it on the component node as follows:
```
this.$emit("buttonClicked", {"title":"Test"});
```

The callback for an external listener:

<Button :title="title" @buttonClicked="onButtonClicked"><Button>

Data update (updating a component externally)

Declare in props the properties that can be updated externally.

props:{
  // Button text
  title:{
    default: "Default"
  } 
}

Update component properties externally:

<Button v-if="showComponent" :title="buttonTitle" borderRadius="20px" :buttonColor="buttonColor" @buttonClicked="componentButtonClick()"></Button>