自定义组件

小程序基础库版本从1.7.0开始支持自定义组件功能，可通过 my.canIUse('component') 进行检测。开发者可以将需要复用的功能模块抽象成自定义组件，从而在不同页面中进行复用，更可以将自定义组件发布到npm上，从而在不同的小程序中进行复用。

创建自定义组件

和页面一样，自定义组件也由4个部分组成：axml、js、json、acss。

  • 开发者需要在 json 中设置 "component": true，声明这是一个自定义组件。
    示例：
  1. // /components/customer/index.json
  2. {
  3.   "component": true
  4. }
  1. // /components/customer/index.js
  2. Component({
  3.   mixins: [], // minxin 方便复用代码
  4.   data: { x: 1 }, // 组件内部数据
  5.   props: { y: 1 }, // 可给外部传入的属性添加默认值
  6.   didMount(){}, // 生命周期函数
  7.   didUpdate(){},
  8.   didUnmount(){},
  9.   methods: { // 自定义事件
  10.     handleTap() {
  11.         this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
  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>

使用自定义组件

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

  1. // /pages/index/index.json
  2. {
  3.   "usingComponents": {
  4.     "customer": "/components/customer/index"
  5.   }
  6. }
  • 然后就像使用基础组件一样，在页面的 axml 中使用自定义组件。
  1. <!-- /pages/index/index.axml -->
  2. <view>
  3.   <customer />
  4. </view>

原文: https://docs.alipay.com/mini/framework/custom-component-overview