微信小程序自定义组件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:{
      isShowOrganizer(){

      }
  }

  // 组件生命周期函数，可以为函数，或一个在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"
           coverUrl='{{joinItem.dakaPic}}'
           activityTitle='{{joinItem.dakaName}}'
           signTimeRange='{{joinItem.dakaTimeRange}}'
           organizerStatus='{{organizerStatus}}'
           signTimes='{{joinItem.dakaNum}}'
           signStatus='{{joinItem.status}}'>
    </home-item>
  </block>
  </view>

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

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

猜你喜欢