1. 创建组件（计步器）
首先在根目录创建components文件夹中创建num-controller文件夹（自定义的组件名字），在这个文件夹上点击右键新建一个component，名字也叫做num-controller。
- num-controller.wxml
<view class="num-controller">
//减号
<view class="iconfont icon-jianshao sub-btn" hidden="{{num<1}}" bindtap="sub"></view>
//数字
<view class="goods-num" hidden="{{num<1}}">{{num}}</view>
//加号
<view class="iconfont icon-zengjia add-btn" bindtap="add"></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('方法名',{要传递的数据})。
2. 引入组件
在index.wxml里引入组件：
<num-controller num="{{num}}" bindnumChange="numChange"></num-controller>
index.json
{
"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传出来的数据
