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
Componentfunction to register the custom component.
The following example shows a basic component.
// app.json{"component": true}
// /components/customer/index.jsComponent({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>