Overview

2023-01-30 07:59

Similar to Page, the customized components consist of four parts: axml, js, json and acss.
There are two steps to create a customized component:

Declare the customized component in json. If it is dependent on other components, it is required to declare additionally the dependent customized components.

Sample code:

copy

{
  "component": true, // mandate, the value for customized component must be true
  "usingComponents": {
    "c1":"../x/index"
  }//Dependent component
}

Parameter details:

Parameter	Type	Required	Description
component	Boolean	Yes	Declare customized component.
usingComponents	Object	No	Path of the customized component in the dependence declaration Absolute project path starts with “/”, and relative path starts with “./” or “../” The npm path does not start with “/”.

Use the Component function to register the customized component. See Component constructor 。

Component parameter description:

Parameter	Description	Document
onInit	Callback on creation	Component lifecycle.
deriveDataFromProps	Callback on creation and update	Component lifecycle.
data	local status	Same as Page (can be modified via setData and $spliceData).
props	Attribute transferred from outside	Component method and external attribute-props.
methods	Customized method	Component method and external attribute - methods.

Sample code:

copy

// /components/customer/index.js
Component({
  mixins: [], // minxin easy reuse code
  data: { x: 1 }, // internal data of component
  props: { y: 1 }, // Can add default to attribute transferred from outside
  onInit() {}, // trigger on component creation, added in version 2.0.0
  deriveDataFromProps(nextProps) {}, // trigger on component creation and before update, added in version 2.0.0
  didMount(){}, // Lifecycle function
  didUpdate(){},
  didUnmount(){},
  methods: { // customized method
    handleTap() {
  	  this.setData({ x: this.data.x + 1}); // Can use setData to change internal attribute
    }, 
  },
})

in addition, the customized component supports slot and can build flexible page structure. See component template and style .
Sample code:

copy

<!-- // /components/customer/index.axml -->
<view>
  <view>x: {{x}}</view>
  <button onTap="handleTap">plusOne</button>
  <slot>
    <view>default slot & default value</view>
  </slot>
</view>