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

Component development

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

Currently, if requireModule('animation') is used in the JavaScript code within a component, it's necessary to verify whether the component's callers also use this built-in JavaScript module. If all callers use this built-in JavaScript module, the animation will be overridden.

Note

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

Property declaration (props)

Use props to declare properties that can be modified externally. Properties not declared in props are read-only from outside the component.

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 syntaxes shown are supported for props. Other syntaxes are not supported.
If the props syntax is incorrect, the card cannot pass data to the component, and properties on the component node within the card will not take effect.
If a property on a component node within a card is not declared in the component's props, that property is invalid.
The data in a card comes from three sources: externally passed data (properties on the component node), default values defined in props, and data from the data segment. The priority is data > externally passed data > props default value. These three data sources are merged, and duplicate fields will be overwritten.

Lifecycle

A component has only four lifecycle events:

beforeCreate: Executed before the component is created.
onCreated: The component is created. At this stage, the JS part is complete, but the component has not yet been rendered to the screen.
onUpdated: Notifies the component when its props are updated. The parameters are the changed fields and their corresponding values.
onDestroyed: Called before the component is destroyed. If a component needs to release resources, you must implement this lifecycle method.

Important

onCreated: It follows the same lifecycle as the card's onCreated method. The invocation order is: child component's onCreated > parent component's onCreated > card's onCreated (if there are nested components).
destroyed: The destruction of a component node triggered by the VIF VFOR logic will directly invoke this lifecycle method. If the destruction of a component is caused by the release of a card, the invocation order is: child component's onDestroyed > parent component's onDestroyed > card's onDestroyed (if there are nested components).

Component usage

Syntax

Take the Button mentioned above as an example.

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

Note

Only vif, vfor, props, and events can be bound to a component node.

Component notification cards (child component notifies parent component)

Within a component, cards are called using the emit method. For example, if a component calls an external event via a buttonClicked method (which needs to be defined within the component), the component's invocation method would be:
```
this.$emit("buttonClicked", {"title":"Test"});
```

The callback method for external event listeners is as follows:

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

Data updates (external update component)

The component needs to declare 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>