浅析微信小程序中自定义组件的方法
微信小程序中怎么自定义组件？下面本篇文章给大家介绍一下微信小程序中自定义组件的方法，希望对大家有所帮助！
在微信小程序开发过程中，对于一些可能在多个页面都使用的页面模块，可以把它封装成一个组件，以提高开发效率。虽然说我们可以引入整个组件库比如 weui、vant 等，但有时候考虑微信小程序的包体积限制问题，通常封装为自定义的组件更为可控。
并且对于一些业务模块，我们就可以封装为组件复用。本文主要讲述以下两个方面：
- 组件的声明与使用
- 组件通信
组件的声明与使用
微信小程序的组件系统底层是通过 Exparser 组件框架实现，它内置在小程序的基础库中，小程序内的所有组件，包括内置组件和自定义组件都由 Exparser 组织管理。
自定义组件和写页面一样包含以下几种文件：
- index.json
- index.wxml
- index.wxss
- index.js
- index.wxs
以编写一个 tab 组件为例：
编写自定义组件时需要在
json 文件中讲 component 字段设为 true：
{ "component": true }登录后复制
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) {} } });登录后复制
在小程序启动时，构造器会将开发者设置的properties、data、methods等定义段，
写入Exparser的组件注册表中。这个组件在被其它组件引用时，就可以根据这些注册信息来创建自定义组件的实例。
模版文件 wxml：
登录后复制
.vtabs {}登录后复制
{ "navigationBarTitleText": "商品分类", "usingComponents": { "vtabs": "../../../components/vtabs", } }登录后复制
组件创建的过程大致有以下几个要点：
根据组件注册信息，从组件原型上创建出组件节点的
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}` } })登录后复制
.the-child
