1.前言

2.之前有一篇博文介绍了小程序中模板template的使用。在使用的时候，虽然可以实现与组件相同的显示功能，但是template没有自己的生命周期，在操作模板上的控件时，事件的传递不好处理，而这些不方便都可以通过组件component来代替，先看一波效果图。

3.实现

4.1.创建component组件

5.

6.首先如上图创建components文件夹，home-item就是最上面效果图的条目的组件模块。这里可以发现，和普通页面一样，组件也可以创建四个文件。在js文件中可以进行数据的绑定与父组件的交互。

7.home-item.json

{"component":true,"usingComponents":{}//可以使用其他组件}

8.home-item.js

//(Component构造器)Component({//一些组件选项options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},//组件的对外属性，属性设置中可包含三个字段,type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数properties:{//活动封面coverUrl:{type:String,value:"http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg"},//活动标题activityTitle:{type:String,value:"我是Title"},//打卡时间范围signTimeRange:{type:String,value:"00:00-23:59"},//是否是组织者organizerStatus:{type:Number,value:0},//是否是组织者signTimes:{type:Number,value:0},//打卡状态signStatus:{type:Number,value:0}},//组件的内部数据，和properties一同用于组件的模版渲染data:{isShowOrganizer:false,},//组件的方法，包括事件响应函数和任意的自定义方法methods:{//跳转活动详情activityDetailTap:function(e){varcurrentPosition=e.currentTarget.dataset.currentPositionthis.triggerEvent('signEvent',{'currentPosition':currentPosition})}}//组件生命周期函数，可以为函数，或一个在methods段中定义的方法名attached:function(){},moved:function(){},detached:function(){},})

9.在这里wxml和wxss文件就不介绍了。看下父页面如何引用子组件。

10.home.json

11.父组件的json文件中引入组件

"usingComponents":{"home-item":"../components/home-item/home-item"}

12.home.wxml

!--首页列表--viewclass='join-layout'blockwx:for="{{joinDatas}}"wx:for-item="joinItem"!--这里是引入的组件名称--home-itemid="homeItem"!--绑定子组件发出的事件--bind:signEvent="signEvent"coverUrl='{{joinItem.dakaPic}}'activityTitle='{{joinItem.dakaName}}'signTimeRange='{{joinItem.dakaTimeRange}}'organizerStatus='{{organizerStatus}}'signTimes='{{joinItem.dakaNum}}'signStatus='{{joinItem.status}}'/home-item/block/view

13.home.js

//父组件接收子组件的事件进行相应的操作signEvent:function(e){//console.log(e)//获取点击的打卡位置varsignPosition=e.detail.currentPositionvardakaBean=this.data.joinDatas[signPosition]//已经打卡wx.navigateTo({url:'../detail/joined-detail/joined-detail?actId='+dakaBean.actId,})//wx.navigateTo({//url:'../detail/not-join/not-join?actId='+dakaBean.actId,//})//if(dakaBean.status==0){//utils.showToast("none","当前时间不在打卡时间范围内,请耐心等待")//}else{////未打卡//wx.navigateTo({//url:'../detail/joined-detail/joined-detail?actId='+dakaBean.actId,//})//}},

14.父子组件之间需要做事件的传递，首先是在子组件中通过this.triggerEvent(‘signEvent’,{})来发送事件，父组件在子组件上进行事件绑定，在js文件中来响应事件。

15.获取数据的方式这里不做介绍，上述代码是父组件的wxml中对子组件进行数据绑定，上述的coverUrl等参数是在组件中声明的属性值，这里作传值用。组件的引入只需要在父组件的json文件中通过usingComponents引入，不需要像使用template在wxml和wxss中将子组件的wxml布局和wxss样式也引入。