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.
In the JSON file of a page, specify the custom component that you want to use.
// /pages/index/index.json
{
"usingComponents": {
"customer": "/components/customer/index"
}
}
In the AXML file of the page, use the specified custom component the same way you use a basic component.
<!-- /pages/index/index.axml -->
<view>
<! -- Assign values to the "name" and "age" attributes of the custom component -->
<customer name="tom" age="{{23}}"/>
</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
orinclude
.
Sample of correct usage:
<!-- /pages/index/index.axml -->
<my-com />
Sample of invalid usage:
<!-- /pages/index/index.axml -->
<include src="./template.axml" />
<!-- /pages/index/template.axml -->
<view>
<my-com />
</view>
Introduce custom component
// Configure in /pages/index/index.json not in the app.json file.
{
"usingComponents":{
"your-custom-component":"mini-antui/es/list/index",
"your-custom-component2":"/components/card/index",
"your-custom-component3":"./result/index",
"your-custom-component4":"../result/index"
}
}
// The absolute path of the project starts with "/", while the relative path starts with "./" or "../".