微信小程序【組件】：自定義組件的數據傳遞【父組件 --- 子組件】數據傳遞★★★★★★★★★

https://segmentfault.com/a/1190000014474289

【子組件】： num-controller.wxml

<view class="num-controller">
 <view class="quantity">
 <view class="minNum" hidden="{{num<1}}" bindtap="sub">-</view>
 <view class="number" hidden="{{num<1}}">{{num}}</view>
 <view class="addNum" data-index="{{index}}" bindtap="add">+</view>
 </view>
</view>

這段代碼就是加減兩個按鈕和一個數字，因為我使用的是字體圖標所以view里什么都沒有。

 num-controller.json

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

這個文件在創建component的時候會自動寫入這段代碼。

num-controller.js

Component({
    /**
     * 組件的屬性列表
     */
    properties: {
        num: Number
    },

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

    },

    /**
     * 組件的方法列表
     */
    methods: {
        add() {
            this.setData({
                num: this.data.num + 1
            })
            this.triggerEvent('numChange', this.data.num);
        },
        sub() {
            if(this.data.num > 0) {
                this.setData({
                    num: this.data.num - 1
                })
            }
            this.triggerEvent('numChange', this.data.num);   //向外傳遞數據
        }
    }
})

組件內部接收一個參數num，類型是Number；
點擊加號觸發add方法，首先把init狀態變為false，然后數字+1，同時觸發numChange方法將改變的數字傳到組件外部；
點擊減號觸發sub方法，數字-1，如果數字為0則把init狀態變為true，同時觸發numChange方法將改變的數字傳到組件外部。

將組件數據傳到外部的方法為this.triggerEvent('方法名',{要傳遞的數據})。

 

【父組件】：引入組件

假如我要在cart/index.wxml里引入組件：

<num-controller num="{{num}}" bindnumChange="numChange"></num-controller>

index.json

{
    "navigationBarTitleText": "購物中心",
    "usingComponents": {
        "num-controller": "../components/num-controller/num-controller"
    }
}

在json文件里注冊組件。

index.js

data: {
    num: 1
},
numChange(e) {
    const numi = e.detail;
    
 }

data里的num是從組件外傳入的num，在numChange方法里用e.detail可以拿到組件內部通過this.triggerEvent傳出來的數據，然后根據業務需求做邏輯修改。