【微信小程序】自定义组件Component的使用

前言

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

实现

1、创建component组件

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

home-item.json

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

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) {
      var currentPosition = e.currentTarget.dataset.currentPosition
      this.triggerEvent('signEvent', {
        'currentPosition': currentPosition
      })
    }
  }
  // 组件生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function(){},
  moved: function(){},
  detached: function(){},

})

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

home.json

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

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

home.wxml

<!-- 首页列表 -->
<view class='join-layout'>
  <block wx:for="{{joinDatas}}" wx:for-item="joinItem">
 <!-- 这里是引入的组件名称 -->
    <home-item id="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>
  

home.js

//父组件接收子组件的事件进行相应的操作
signEvent: function(e) {
  // 获取点击的打卡位置
  var signPosition = e.detail.currentPosition
  var dakaBean = this.data.joinDatas[signPosition]
  // 已经打卡
  wx.navigateTo({
    url: '../detail/joined-detail/joined-detail?actId=' + dakaBean.actId,
  })
}
  

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

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

总结

~~