小程序提供的组件比较大众化,然而现实中很多零碎、重复的业务功能,而这些业务功能除了在不同页面中需要用到,只是数据上的不同,其行为都是一样的。
比如,一个性别选择器:
<picker-gender name=“gender” value="{{gender}}" bindchange=“genderChange”></picker-gender>
如果你追求的不是“原生组件”,那么,用 js 实现“自定义组件”这个本来就是“开放”的呀,你自己把自己做的代码包装一下就可以算是“自定义组件”了。
如果你想要微信官方提供一个专门分享第三方自定义组件的平台,这个目前还没有,但民间已经有了,比如 http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2123
换言之,一种期望的自定义组件:
# picker-gender 组件定义
```
– /components/picker-gender/index.wxml
<view>
当前值:{{value}}
请选择性别:<picker bindchange=“change”></picker>
</view>
– /components/picker-gender/index.js
Component({
data: {},
onLoad(options) {
// options.value
// options.bindchange
},
change(e) {
options.bindchange();
}
})
```
因此,在使用上:
```html
<picker-gender name=“gender” value="{{gender}}" bindchange=“genderChange”></picker-gender>
```
组件间的通信透过像 `value` 表示输入属性,`bindchange` 表示输出通知。