微信小程序【组件】：自定义组件的数据传递【父组件 --- 子组件】数据传递★★★★★★★★★

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传出来的数据，然后根据业务需求做逻辑修改。