All Products
Search
Document Center

Create custom component

Last Updated: Feb 04, 2021

Similar to Page, a custom component consists of axml, js, json, and acss. To create a custom component, perform the following steps.

  1. Declare a component.
  2. Use the Component function to register the custom component.

The following example shows a basic component.

  1. // app.json
  2. {
  3. "component": true
  4. }
  1. // /components/customer/index.js
  2. Component({
  3. mixins: [], // minxin facilitates code reuse.
  4. data: { x: 1 }, // Internal component data.
  5. props: { y: 1 }, // Adds default values for the properties passed from the external.
  6. didMount(){}, // Life cycle function.
  7. didUpdate(){},
  8. didUnmount(){},
  9. methods: { // Custom method.
  10. handleTap() {
  11. this.setData({ x: this.data.x + 1}); // setData can be used to change the internal property.
  12. },
  13. },
  14. })
  1. <!-- /components/customer/index.axml -->
  2. <view>
  3. <view>x: {{x}}</view>
  4. <button onTap="handleTap">plusOne</button>
  5. <slot>
  6. <view>default slot & default value</view>
  7. </slot>
  8. </view>