微信小程序组件化的解决方案从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本，可以通过在开发者工具右侧点击详情查看：

最基本的组件小程序的组件，其实就是一个目录，该目录需要包含4个文件：

xxx.jsonxxx.wxmlxxx.wxssxxx.js声明一个组件首先需要在json文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）

其次，在要引入组件的页面的json文件内，进行引用声明

这样，在主页面就可以使用了。

相比于vue的组件引入，小程序的方案更简洁。vue组件引入是需要import之后，同时在components里面注册，而小程序的组件只需要在.json里面注册，就可以在wxml里面使用。

使用slot和vue相同，小程序也有slot概念。

单一slot在组件模板中可以提供一个slot节点，用于承载组件引用时提供的子节点。

多个slot如果需要在组件内使用多个slot，需要在组件js中声明启用：

使用：

Component构造器刚才我们说了，一个组件内应该包括js,wxml,wxss,json四个文件。wxml相当于是HTML，wxss相当于是css,那么js里面应该写什么呢？

微信官方提供的案例中：

里面调用了一个Component构造器。Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。具体Component里面可以放什么东西，如下所示：

组件与数据通信组件化必然要涉及到数据的通信，为了解决数据在组件间的维护问题，vue,react，angular有不同的解决方案。而小程序的解决方案则简洁很多。

主页面传入数据到组件properties相当于vue的props，是传入外部数据的入口。

注意：传入的数据，不管是简单数据类型，还是引用类型，都如同值复制一样（和红宝书里面描述js函数参数传入是值复制还不一样，红宝书里面的意思是：简单数据类型直接复制数值，引用类型复制引用，也就是说在函数内修改参数对象的属性，会影响到函数外对象的属性）。

如果是Vue的props，则可以通过.sync来同步，而在小程序子组件里面，调用this.setData()修改父组件内的数据，不会影响到父组件里面的数据,也就是说，子组件property的修改，仿佛和父组件没有任何关系。那么，如果是在子组件内修改父组件的数据，甚至是修改兄弟组件内的数据，有没有简单的方法呢？下面会有讲到

组件传出数据到主页面和vue类似，组件间交互的主要形式是自定义事件。

组件通过this.triggerEvent()触发自定义事件，主页面在组件上bind:component_method"main_page_mehod"来接收自定义事件。

其中，this.triggerEvent()方法接收自定义事件名称外，还接收两个对象，eventDetail和eventOptions。

组件之间数据通信和vue提出的vuex的解决方案不同，小程序的组件间的通讯简单小巧。你可以和主页面与组件通讯一样，使用自定义事件来进行通讯，当然更简单方便的方法，是使用小程序提供的relations.

relations是Component构造函数中的一个属性，只要两个组件的relations属性产生关联，他们两个之间就可以捕获到对方，并且可以相互访问，修改对方的属性，如同修改自己的属性一样。

比如说，有两个组件如代码所示：

他们之间的关系如下图所示：

两个组件捕获到对方组件的实例，是通过this.getRelationNodes('./path_to_a')方法。既然获取到了对方组件的实例，那么就可以访问到对方组件上的data,也可以设置对方组件上的data,但是不能调用对方组件上的方法。

注意：1.主页面使用组件的时候，不能有数字，比如说component_sub1或component_sub_1，可以在主页面的json里面设置一个新名字

2.relations里面的路径，比如说这里：

是对方组件真实的相对路径，而不是组件间的逻辑路径。

3.如果relations没有关联，那么this.getRelationNodes是获取不到对方组件的

4.本组件无法获取本组件的实例，使用this.getRelatonsNodes('./path_to_self')会返回一个null

4.type可以选择的parent、child、ancestor、descendant

现在我们已经可以做到了两个组件之间的数据传递，那么如何在多个组件间传递数据呢？

如上图所示，同级的组件b和同级的组件c,b和c之间不可以直接获取，b可以获取到a，c也可以获取到a，而a可以直接获取到b和c。所以，如果想获取到兄弟元素，需要先获取到祖先节点，然后再通过祖先节点获取兄弟节点

我在组件b里面，我需要先找到祖先组件a的实例，然后用祖先组件a的实例的getRelationNodes方法获取到组件c的实例。看见没？恐怕我们又要写一大堆重复性的代码了。

幸好，微信小程序还提供了behavior属性,这个属性相当于mixin，很容易理解的，是提高代码复用性的一种方法。

思路：

假设目前有三个组件，组件a,组件b,组件c，其中组件b和组件c是兄弟组件，组建a是b和c的兄弟组件。为了减少代码的重复性，我们把获取父组件的方法，和获取兄弟组件的方法封装一下，封装在behavior的methods中。只要是引入该behavior的组件，都可以便捷的调用方法。实现：

新建一个behavior文件，命名无所谓，比如说relation_behavior.js

然后在组件b,和组件c上引入该behavior，并且调用方法，获取父组件和兄弟组件的实例

同时需要注意，c和b两个组件，从relations属性的角度来说，是a的后代组件。

但是组件b和组件c所处的作用域,都是主页面的作用域，传入的property都是主页面的property，这样就保证了组件数据的灵活性。relations像一个隐形的链子一样把一堆组件关联起来，关联起来的组件可以相互访问，修改对方的数据，但是每一个组件都可以从外界独立的获取数据。

看了这么多理论的东西，还是需要一个具体的场景来应用。

比如说，我们有个一个分享记录图片心情的页面，当用户点击【点赞】的按钮时候，该心情的记录点赞按钮会变红，下面的一栏位置会多出点赞人的名字。

如果不通过组件化，很可能的做法是修改一个点赞按钮，然后遍历数据更新数据，最后所有记录列表的状态都会被重新渲染一遍。

如果是通过组件化拆分：把点赞的按钮封装为组件b,下面点赞人的框封装为组件c,每一个心情记录都是一个组件a

下面是代码实现

这样，组件b可以修改组件c中的数据。同时，组件b和组件c又可以通过properties和事件系统，和主页面保持独立的数据通信。