全部产品
云市场
云游戏

使用自定义组件

更新时间:2019-09-09 14:07:25

说明:自定义组件的事件(如 onTap 等),并不是每个自定义组件默认支持的,需要自定义组件本身明确支持才能使用。自定义组件支持事件具体方法请参见 component 构造器

使用方法

自定义组件的使用和基础组件类似。

  1. 在页面 JSON 文件中指定使用的自定义组件。

    1. // /pages/index/index.json
    2. {
    3. "usingComponents": {
    4. "customer": "/components/customer/index"
    5. }
    6. }
  2. 在页面的 AXML 文件中使用自定义组件,与使用基础组件类似。

    1. <!-- /pages/index/index.axml -->
    2. <view>
    3. <!-- 给自定义组件传递 属性name与属性age -->
    4. <customer name="tom" age="{{23}}"/>
    5. </view>
    说明
    • 使用自定义组件时,给自定义组件传递的属性可以在自定义组件内通过 this.props 获取,参见 props
    • 自定义组件只能在 page 自身的 AXML 文件和组件自身的 AXML 文件中使用,不能通过 import 或 include 使用。

正确示例

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

错误示例

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

引用自定义组件

  1. // /pages/index/index.json 中配置(不是 app.json
  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. // 项目绝对路径以 / 开头,相对路径以 ./ 或者 ../ 开头