微信小程序中怎么自定义组件？下面本篇文章给大家介绍一下微信小程序中自定义组件的方法，希望对大家有所帮助！
在微信小程序开发过程中，对于一些可能在多个页面都使用的页面模块，可以把它封装成一个组件，以提高开发效率。虽然说我们可以引入整个组件库比如 weui、vant 等，但有时候考虑微信小程序的包体积限制问题，通常封装为自定义的组件更为可控。
并且对于一些业务模块，我们就可以封装为组件复用。本文主要讲述以下两个方面：
组件的声明与使用
组件通信
组件的声明与使用
微信小程序的组件系统底层是通过 Exparser 组件框架实现，它内置在小程序的基础库中，小程序内的所有组件，包括内置组件和自定义组件都由 Exparser 组织管理。
自定义组件和写页面一样包含以下几种文件：
index.json
index.wxml
index.wxss
index.js
index.wxs
以编写一个 tab 组件为例： 编写自定义组件时需要在 json 文件中讲 component 字段设为 true：
{ "component": true}在 js 文件中，基础库提供有 Page 和 Component 两个构造器，Page 对应的页面为页面根组件，Component 则对应：
Component({ options: { // 组件配置 addGlobalClass: true, // 指定所有 _ 开头的数据字段为纯数据字段 // 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能 pureDataPattern: /^_/, multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { vtabs: {type: Array, value: []}, }, data: { currentView: 0, }, observers: { // 监测 activeTab: function(activeTab) { this.scrollTabBar(activeTab); } }, relations: { // 关联的子/父组件 '../vtabs-content/index': { type: 'child', // 关联的目标节点应为子节点 linked: function(target) { this.calcVtabsCotentHeight(target); }, unlinked: function(target) { delete this.data._contentHeight[target.data.tabIndex]; } } }, lifetimes: { // 组件声明周期 created: function() { // 组件实例刚刚被创建好时 }, attached: function() { // 在组件实例进入页面节点树时执行 }, detached: function() { // 在组件实例被从页面节点树移除时执行 }, }, methods: { // 组件方法 calcVtabsCotentHeight(target) {} } });如果有了解过 Vue2 的小伙伴，会发现这个声明很熟悉。
在小程序启动时，构造器会将开发者设置的properties、data、methods等定义段，
写入Exparser的组件注册表中。这个组件在被其它组件引用时，就可以根据这些注册信息来创建自定义组件的实例。
模版文件 wxml：
<view class='vtabs'> <slot /></view>
样式文件：
.vtabs {}外部页面组件使用，只需要在页面的 json 文件中引入
{ "navigationBarTitleText": "商品分类", "usingComponents": { "vtabs": "../../../components/vtabs", }}在初始化页面时，Exparser 会创建出页面根组件的一个实例，用到的其他组件也会响应创建组件实例（这是一个递归的过程）：
组件创建的过程大致有以下几个要点：
根据组件注册信息，从组件原型上创建出组件节点的
JS对象，即组件的this；将组件注册信息中的
data复制一份，作为组件数据，即this.data；将这份数据结合组件
WXML，据此创建出Shadow Tree（组件的节点树），由于Shadow Tree中可能引用有其他组件，因而这会递归触发其他组件创建过程；将
ShadowTree拼接到Composed Tree（最终拼接成的页面节点树）上，并生成一些缓存数据用于优化组件更新性能；触发组件的
created生命周期函数；如果不是页面根组件，需要根据组件节点上的属性定义，来设置组件的属性值；
当组件实例被展示在页面上时，触发组件的
attached生命周期函数，如果Shadow Tree中有其他组件，也逐个触发它们的生命周期函数。
组件通信
由于业务的负责度，我们常常需要把一个大型页面拆分为多个组件，多个组件之间需要进行数据通信。
对于跨代组件通信可以考虑全局状态管理，这里只讨论常见的父子组件通信：
方法一 WXML 数据绑定
用于父组件向子组件的指定属性设置数据。
子声明 properties 属性
Component({ properties: { vtabs: {type: Array, value: []}, // 数据项格式为 `{title}` }})父组件调用：
<vtabs vtabs="{{ vtabs }}"</vtabs>方法二 事件
用于子组件向父组件传递数据，可以传递任意数据。
子组件派发事件，先在 wxml 结构绑定子组件的点击事件：
<view bindtap="handleTabClick">
再在 js 文件中进行派发事件，事件名可以自定义填写， 第二个参数可以传递数据对象，第三个参数为事件选项。
handleClick(e) { this.triggerEvent( 'tabclic