微信小程序 自定义组件

自定义组件
项目的开发组件必不可少。
使用微信小程序的自定义组件类似使用基础组件，使用组件可以使得页面拆分成多个低耦合的模块，有助于代码的维护。

创建自定义组件
组件的构成类似页面，由json wxml wxss js 4个文件组成。在新建一个组件的时候需要在组件的json文件中设置 components 字段 true
{
"component": true
}
在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。(这句是官方说的，我想应该是会全局污染)
自定义组件的js文件和页面的js生命周期不一样，需要使用Component()来注册。当然组件使用的时候可以使用父级传递的数据。

使用自定义组件
父级页面使用组件的时候需要在json中设置 usingComponents 引入相应的组件。需要注意的是路径，路径可以从根目录下开始写。
‘/components/list/list’
这里的components 文件夹是我专门放置组件的文件，和pages同级。
这里的list是我定义的一个自定义组件。

细节注意事项（引用自微信文档，稍微过下就好）
一些需要注意的细节：
因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。
注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：
使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
使用 usingComponents 时会多一些方法，如 selectComponent 。
出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj。（深复制会在这个值被组件间传递时发生。）
如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

参考链接
小程序自定义组件介绍
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
Component构造器 -自定义组件中的构造器
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html