从applet基础库的1.6.3版本开始，applet支持简洁的组件编程。要查看您使用的applet基本库的版本，您可以单击开发人员工具右侧的详细信息来查看：

最基本的组件

小程序的组件实际上是一个目录，需要包含四个文件：

XXX . json XXX . wxlxxx . wxsxxx . js

声明一个组件

首先，需要在JSON文件中声明一个自定义组件(将组件字段设置为true，将这组文件设置为自定义组件)

{'component':true}其次，在要引入组件的页面的json文件中做一个引用声明。

{'usingComponents':{//用户定义的组件名称：组件路径，注意是相对路径，而不是绝对路径' component-tag-name ' : ' path/to/the/custom/component ' } }

这样，它就可以在主页上使用。

与vue的组件引入相比，applet的方案更加简洁。Vue组件需要在组件中同时导入和注册，而小程序的组件只能通过在中注册才能在wxml中使用。json。

使用slot

和vue一样，小程序也有槽的概念。

单一slot

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

//在主页面中，addlike是组件Addlikeitem=' item ' my _ properties=' SSSS ' text我是插槽/text插入的文本/addlike//addlike组件viewclass='container'viewhello，这里是组件/viewhello，{ { my _ properties } }/view slot/slot/view//渲染后，viewclass='container'viewhello，这里是组件/view hello，{{my _ properties}}/viewtext我是插槽/text/view 010-插入的文本

组件({ options : { multiple slot 3360 true//在定义组件时在选项中启用多插槽支持}，属性： {/*.* /}，方法3360 {/*.* /}})使用：

//主页Addlikeitem=' item ' my _ properties=' SSSSS '/将slot属性添加到普通元素中，并指定slotname。它可以成为子元素的槽。textslot='slot1 '我是slot1插入的文本/text slot=' slot2 '我是slot 2插入的文本/text/addlike//子页viewclass='container'viewhello，这是组件viewhello，{ { my _ properties } }/view slot name=' slot 1 '/slot name=' slot 2 '/slot/view

多个slot

正如我们刚才所说，一个组件应该包括js、wxml、wxss、json。

件。wxml 相当于是 HTML，wxss 相当于是 css, 那么js 里面应该写什么呢？

微信官方提供的案例中：

Component({behaviors:[],properties:{},data:{},//私有数据，可用于模版渲染//生命周期函数，可以为函数，或一个在methods段中定义的方法名attached:function(){},moved:function(){},detached:function(){},methods:{onMyButtonTap:function(){},_myPrivateMethod:function(){},_propertyChange:function(newVal,oldVal){}}})

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

组件与数据通信

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

主页面传入数据到组件

properties相当于vue的props，是传入外部数据的入口。

//主页面使用组件<aadd_like="{{add_like}}"></a>//组件a.js内Component({properties:{add_like:{type:Array,value:[],observer:function(){}}}})

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

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

组件传出数据到主页面

和vue类似，组件间交互的主要形式是自定义事件。

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

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

//子组件触发自定义事件ontap(){//所有要带到主页面的数据，都装在eventDetail里面vareventDetail={name:'sssssssss',test:[1,2,3]}//触发事件的选项bubbles是否冒泡，composed是否可穿越组件边界，capturePhase是否有捕获阶段vareventOption={composed:true}this.triggerEvent('click_btn',eventDetail,eventOption)}//主页面里面main_page_ontap(eventDetail){console.log(eventDetail)//eventDetail//changedTouches//currentTarget//target//type//……//detail哈哈，所有的子组件的数据，都通过该参数的detail属性暴露出来}

组件之间数据通信

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

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

Component({relations:{'./path_to_b':{//'./path_to_b'是对方组件的相对路径type:'child',//type可选择两组：parent和child、ancestor和descendantlinked:function(target){}//钩子函数，在组件linked时候被调用target是组件的实例，linkChanged:function(target){}unlinked:function(target){}}},})

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

//组件aslot包含了组件b<a><b></b></a>

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

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

//在a组件中Component({relations:{'./path_to_b':{type:'child',linked:function(target){}//target是组件b的实例，linkChanged:function(target){}unlinked:function(target){}}},methods:{test(){varnodes=this.getRelationNodes('./path_to_b')varcomponent_b=nodes[0];//获取到b组件的数据console.log(component_b.data.name)//设置父组件的数据//这样的设置是无效的this.setData({component_b.data.name:'ss'})//需要调用对方组件的setData()方法来设置component_b.setData({name:'ss'})}}})//在b组件里面Component({relations:{'./path_to_a':{//注意！必须双方组件都声明relations属性type:'parent'}},data:{name:'dudu'}})

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

{"usingComponents":{"test_component_subb":"../../../components/test_component_sub2/test_component_sub2"}}

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



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

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

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

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