创建自定义组件

Page 类似,自定义组件也由 axmljsjsonacss 4 个部分组成。创建自定义组件有以下 2 个步骤:

  1. 声明一个组件。
  2. 使用 Component 函数,注册自定义组件。

以下为一个基本的组件示例:

  1. // app.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>