小程序自定义组件的用法

在小程序中的公共模板和自定义组件，感觉自定义组件比较好用、顺手。

组件页面的写法和一般页面一样。

基本语法

Component 用于定义组件，指定组件的属性、数据和方法。代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    data:"duxin"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

定义一个计数器组件来理解小程序的自定组件：

组件的wxml

<!-- 主容器 -->
<view class="stepper" bindtap="step">
  <!-- 减号 -->
  <text class="{{minusStatus}}" bindtap="bindMinus">-</text>
  <!-- 数值 -->
  <input type="number" bindchange="bindManual" value="{{num}}" />
  <!-- 加号 -->
  <text class="normal" bindtap="bindPlus">+</text>
  <view class="value" bindtap="sendMesgToFather">给父组件传值</view>
</view>

组件的样式wxss

/* component/stepper/stepper.wxss */

/*全局样式*/

page {
  padding: 20px 0;
}

/*主容器*/

.stepper {
  width: 350px;
  height: 26px;
  /*给主容器设一个边框*/
  border: 1px solid red;
  border-radius: 3px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

/*加号和减号*/

.stepper text {
  width: 50px;
  line-height: 26px;
  text-align: center;
}

/*数值*/

.stepper input {
  width: 100px;
  height: 26px;
  float: left;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  /*给中间的input设置左右边框即可*/
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/*普通样式*/

.stepper .normal {
  color: black;
}

/*禁用样式*/

.stepper .disabled {
  color: #ccc;
}

.value {
  width: 150px;
}

组件的js：

// pages/Components/stepper/stepper.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num: Number // 父组件传递的参数
  },

  /**
   * 组件的初始数据
   */
  data: {
    // num: 0,
    minusStatus: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    step() {
      var myEventDetail = {
        name: "duxin",
        num: this.data.num
      } // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
    bindMinus() {
      var num = this.data.num;
      if (num > 0) {
        num--;
      }

      var minusStatus = num <= 0 ? "disabled" : "normal";
      this.setData({
        minusStatus: minusStatus,
        num: num
      })
    },
    bindPlus() {
      var num = this.data.num;
      num++;
      var minusStatus = num <= 0 ? "disabled" : "normal";
      this.setData({
        num: num,
        minusStatus: minusStatus
      })
    },
    sendMesgToFather() {
      // 向父组件发送值
      let step = 2;
      this.triggerEvent('realNameConfirm', step) 
    }
  }
})

在页面中引入组件：

在页面的json文件中引入组件：


{
"usingComponents": {
"stepper":"../Components/stepper/stepper"
}
}

<stepper  num="10"></stepper>

当页面向组件传值的时候，直接在组件设置相应的属性和属性值即可。如果页面接收组件传递过来的参数呢？那就在页面使用组件的时候直接绑定对应的函数来接收参数，代码如下：

<stepper  num="10"   bind:realNameConfirm="realNameConfirm"></stepper>

页面js：

// 接收组件传递过来的参数
  realNameConfirm(e) {
    console.log(e)
    this.setData({
      value:e.detail
    })
  },