微信小程序之自定義組件的應用

小程序支持自定義組件，下面是一個簡單的購物車組件，實現的效果如圖：

效果圖

創建組件

在根目錄創建components目錄，然后創建計數組件 count 如圖：

組件內容

<!--components/count/count.wxml-->
<view class='count'>
  <view class='del' bindtap='bindDel'> - </view>
  <view class='num'> {{num}} </view>
  <view class='add' bindtap='bindAdd'> + </view>
</view> 

/* components/count/count.wxss */ 
.count {
  border: 1px solid #bbb;
  width: 400rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.count view {
  font-size: 36rpx;
  height: 80rpx;
  width: 80rpx;
  border: 1px solid #dfdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.del, .add {
  background: #dfdcdc;
}
.count .num {
  color: #f22
}

count.json:

{
  "component": true,
  "usingComponents": {}
}

// components/count/count.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    num: { // 屬性名
      type: Number, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: 0 // 屬性初始值（可選
    },
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: { 
    bindDel () {
      let { num } = this.data
      if (num < 1) {
        return
      }
      this.setData({
        num: num - 1
      })
      this.triggerEvent('changeCount', this.data.num) // 自定義組件觸發事件時，需要使用 triggerEvent 方法, 這里觸發父組件的changeCount方法，后面的this.data.num傳遞給父組件
    },

    bindAdd () {
      let { num } = this.data
      this.setData({
        num: num + 1
      })
      console.log(num, this.data.num)
      this.triggerEvent('changeCount', this.data.num) // 自定義組件觸發事件時，需要使用 triggerEvent 方法
    }
  }
})

組件引入

在父組件index中引入組件：

index.wxml:

<view style="margin: 20rpx 0;"> ------ 父組件 ------ </view> 
<view>單價：{{price}}</view>
<view>總價：{{price * num}}</view> 



<view style="margin: 180rpx 0 30rpx;"> ------ 子組件 ------ </view> 

<!-- 當自定義組件觸發“changeCount”事件時，調用“onChangeCount”方法 -->
<count num='{{num}}' bind:changeCount='onChangeCount'></count> 

注冊組件：

index.json:

{
  "usingComponents": { 
    "count": "/components/count/count"
  }
}

index.js:

Page({
  data: {
    num: 1,
    price: 50
  },

  onChangeCount (e) {
    console.log(e.detail) // e.detail可以拿到組件通過this.triggerEvent傳出來的數據
    this.setData({
      num: e.detail
    })
  }
})