小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。
例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。
面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。
01
开发者可以将一些复用性强的代码抽象成自定义组件，它们的使用方法与基础库内置的 view 、 button等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。
02
自定义组件局部更新时的性能相比页面的局部更新要小很多，在必要时可以利用这个特点进行性能优化。
03
自定义组件是相对独立的功能模块，开发者可以将自己的自定义组件代码开源出来，与其他开发者共享开发成果。
如何编写一个自定义组件？
每个自定义组件由四个代码文件组成：
json文件 用于于放置一些最基本的组件配置
wxml 文件 组件模版
wxss 文件 组件的样式，只在组件内部节点上生效（这个文件是可选的）
js 文件 组件的 JS 代码，承载组件的主要逻辑
这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。
1.组件配置
编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下，名为 custom-checkbox.json 。
这个文件中包含以下内容：
2.组件模板
在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似：
这个模版将在组件中渲染出一个 checkbox 和一个 label 。
3.组件样式
同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定：
4.组件定义
组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：
简单的 Component 构造器调用包含3个定义段：
methods 中的方法可以用来包含组件的事件回调函数；
data 是组件的内部数据，可以用 this.setData 方法来改变；
properties 中声明这个组件的属性，上例中声明了 title 属性，这样，组件外部在使用组件时就可以指定这个属性的值。
这样我们就编写好了 custom-checkbox 这个组件。
如何使用自定义组件？
使用上面这个自定义组件的方法很简单。
Step 1
在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明：
Step 2
在页面对应的 wxml 文件中使用了：
这样，在页面上最终呈现的效果如下：
在自定义组件中也是可以引用其他自定义组件的，方法与在页面中引用的方法类似。
高级特性与注意事项
除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。
01
在页面和自定义组件间通信时，最常用的方法是事件机制，自定义组件可以使用 triggerEvent 接口向页面发送事件，页面 WXML 中使用 bind 或者 catch 就可以监听到。
02
如果事件机制还不足以满足组件间通信需要的话，可以使用 selectComponent 接口。
03
如果同时建立了好几个有相互关联关系的组件，可以使用组件间关系接口 relations 。
04
组件间可能需要共享部分代码，这时可以使用behaviors 。
有关它们的详细文档，请参考 开发者文档 - 框架 - 自定义组件 章节。
还需要注意的是，一些与 WXML 节点相关的接口，如wx.createSelectorQuery 、 wx.createCanvasContext ，在自定义组件中使用时有一定的变化，使用时请再次阅读一下相关的文档。
只想说，有一点很麻烦，每个page的json里面都要配置组件的命名和路径，页面多的话还要去一个一个的引用相同名称的组件，这样真的很繁琐，不能像vue的iview或者elementui一样，全局引用，不需要再每个页面重复定义，这也是至今我不用小程序组件的原因，真的很不方便。
完全看不懂，不是程序员
调试相当费劲
如果能优化一下调试功能就好啦，加油！
和vue的组件有点像, 小程序越来越完善了
很棒的文档，算腾讯一点点认真的对待开发者了
这个文档图片都是webp，safari下显示不出来
像swiper这种组件容器，slot插入的位置为什么不对，好像并不会在我设置的容器内，实现的原理能否解释下
<swiper>
<slot></slot>
</swiper>
同问。 swiper 这样的容器貌似没法在父组件使用 <swiper>， 子组件使用 <swiper-item> 这样无法使用
组件js编译后的注释webpack配置，怎么能通过参数的形式，让编译后的js不显示webpack的东西。
一个组件在AB页面复用，现在我从A页面中跳转进入B页面，B页面properties改变了一个值，返回到A页面的时候，这个值还是B页面里修改的，如何重置？