自定义组件

组件目录需有同名 .js、.wxml、.wxss 与 .json，并在 .json 中声明 component: true。

{ "component": true }

Component({
  properties: { value: { type: Number, value: 1 }, min: { type: Number, value: 1 } },
  methods: {
    increase() {
      this.triggerEvent('change', { value: this.data.value + 1 })
    },
  },
})

<button bindtap="increase" disabled="{{value <= min}}">+</button>
<text>{{value}}</text>

生命周期与通信

• attached：组件加入页面节点树，可初始化请求或数据。
• ready：布局完成，可执行节点查询。
• detached：清理定时器、监听器和未完成任务。
• observers：处理属性联动，保持轻量，避免触发循环 setData。
• triggerEvent(name, detail)：向父组件冒泡业务事件；事件参数放入 detail。

组件不能修改父组件传入的属性。需要双向交互时，由父组件接收事件后更新自己的数据，再将新值传回。

组件设计

• properties 明确输入类型、默认值和空态；不要依赖父页面内部字段。
• 通过 triggerEvent 通知用户动作，事件名语义化。
• 组件内部状态只服务自身交互；受控与非受控模式不要混用。
• 样式默认隔离；需要开放定制时使用 external classes 或 CSS 变量等明确接口。
• 通用组件不耦合页面路由、接口地址和业务全局状态。