All Products
Search
Document Center

Use custom component

Last Updated: Feb 04, 2021
Note: By default, a custom component does not support events, such as the onTap event. To enable a custom component to support events, you must complete relevant configurations. For information about how to enable a custom component to support events, see Component constructor.

Usage

The usage of a custom component is similar to that of a basic component.

  1. In the JSON file of a page, specify the custom component that you want to use.

       
    1. // /pages/index/index.json
    2. {
    3. "usingComponents": {
    4. "customer": "/components/customer/index"
    5. }
    6. }
  2. In the AXML file of the page, use the specified custom component the same way you use a basic component.

       
    1. <!-- /pages/index/index.axml -->
    2. <view>
    3. <! -- Assign values to the "name" and "age" attributes of the custom component -->
    4. <customer name="tom" age="{{23}}"/>
    5. </view>
    Note:
    • When adopting the custom component, you can use this.props to obtain the specified attributes in the custom component. For more information, see props.
    • You can use a custom component only in the AXML files of a page and of the component. You cannot use a custom component by import or include.

Sample of correct usage:

 
  1. <!-- /pages/index/index.axml -->
  2. <my-com />

Sample of invalid usage:

 
  1. <!-- /pages/index/index.axml -->
  2. <include src="./template.axml" />
  3. <!-- /pages/index/template.axml -->
  4. <view>
  5. <my-com />
  6. </view>

Introduce custom component

 
  1. // Configure in /pages/index/index.json not in the app.json file.
  2. {
  3. "usingComponents":{
  4. "your-custom-component":"mini-antui/es/list/index",
  5. "your-custom-component2":"/components/card/index",
  6. "your-custom-component3":"./result/index",
  7. "your-custom-component4":"../result/index"
  8. }
  9. }
  10. // The absolute path of the project starts with "/", while the relative path starts with "./" or "../".