05. 组件化开发

小程序支持组件化开发，提高代码复用率。

一、创建组件

1. 组件目录

components/
└── my-component/
    ├── my-component.js
    ├── my-component.json
    ├── my-component.wxml
    └── my-component.wxss

2. 组件配置

// my-component.json
{
  "component": true
}

3. 组件逻辑

Component({
    properties: {
        title: {
            type: String,
            value: "默认标题"
        }
    },

    data: {
        count: 0
    },

    methods: {
        handleTap() {
            this.setData({
                count: this.data.count + 1
            });
            this.triggerEvent("customEvent", { count: this.data.count });
        }
    }
});

4. 组件模板

<!-- my-component.wxml -->
<view class="my-component">
    <text>{{title}}</text>
    <text>次数：{{count}}</text>
    <button bindtap="handleTap">点击</button>
</view>

---

二、使用组件

1. 引入组件

// 页面的 json 文件
{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

2. 使用组件

<my-component title="我的组件" bind:customEvent="handleCustomEvent" />

Page({
    handleCustomEvent(e) {
        console.log("组件事件", e.detail);
    }
});

---

总结

组件化开发可以提高代码复用率和可维护性。