支付寶小程序框架 自定義組件·使用

注意：自定義組件的事件（如 onTap 等），并不是每個自定義組件默認(rèn)支持的，需要自定義組件本身明確支持才能使用。

自定義組件的使用和基礎(chǔ)組件類似。

1、在頁面 JSON 文件中指定使用的自定義組件。

// /pages/index/index.json
{
  "usingComponents": {
    "my-component": "/components/index/index"
  }
}

2、在頁面的 AXML 文件中使用自定義組件，與使用基礎(chǔ)組件類似。

<!-- /pages/index/index.axml -->
<view>
  <!-- 給自定義組件傳遞 屬性name與屬性age -->
  <my-component name="tom" age="{{23}}"/>
</view>

注意：

1. 使用自定義組件時，給自定義組件傳遞的屬性可以在自定義組件內(nèi)通過 this.props 獲取，參見 props。
2. 自定義組件只能在 page 自身的 AXML 文件和組件自身的 AXML 文件中使用，不能通過 import 或 include 使用。

正確示例:

<!-- /pages/index/index.axml -->
<my-component />

錯誤示例:

<!-- /pages/index/index.axml -->
<include src="./template.axml" />


<!-- /pages/index/template.axml -->
<view>
  HI, template
</view>

引用自定義組件

// 在 /pages/index/index.json 中配置（不是 app.json ）
{
  "usingComponents":{
    "your-custom-component":"mini-ali-ui/es/list/index",
    "your-custom-component2":"/components/card/index",
    "your-custom-component3":"./result/index",
    "your-custom-component4":"../result/index"
  }
}
// 項目絕對路徑以 / 開頭，相對路徑以 ./ 或者 ../ 開頭