Similar to Page
, a custom component consists of axml
, js
, json
, and acss
. To create a custom component, perform the following steps.
- Declare a component.
- Use the
Component
function to register the custom component.
The following example shows a basic component.
// app.json
{
"component": true
}
// /components/customer/index.js
Component({
mixins: [], // minxin facilitates code reuse.
data: { x: 1 }, // Internal component data.
props: { y: 1 }, // Adds default values for the properties passed from the external.
didMount(){}, // Life cycle function.
didUpdate(){},
didUnmount(){},
methods: { // Custom method.
handleTap() {
this.setData({ x: this.data.x + 1}); // setData can be used to change the internal property.
},
},
})
<!-- /components/customer/index.axml -->
<view>
<view>x: {{x}}</view>
<button onTap="handleTap">plusOne</button>
<slot>
<view>default slot & default value</view>
</slot>
</view>