1. 創(chuàng)建組件（計(jì)步器）
首先在根目錄創(chuàng)建components文件夾中創(chuàng)建num-controller文件夾（自定義的組件名字）术浪，在這個(gè)文件夾上點(diǎn)擊右鍵新建一個(gè)component恶座，名字也叫做num-controller柬帕。
- num-controller.wxml
<view class="num-controller">
//減號(hào)
<view class="iconfont icon-jianshao sub-btn" hidden="{{num<1}}" bindtap="sub"></view>
//數(shù)字
<view class="goods-num" hidden="{{num<1}}">{{num}}</view>
//加號(hào)
<view class="iconfont icon-zengjia add-btn" bindtap="add"></view>
</view>
- num-controller.json
{
"component": true,
"usingComponents": {}
}
這個(gè)文件在創(chuàng)建component的時(shí)候會(huì)自動(dòng)寫入這段代碼添瓷。
- num-controller.js
Component({
/**
* 組件的屬性列表
*/
properties: {
num: Number
},
/**
* 組件的初始數(shù)據(jù)
*/
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);
}
}
})
組件內(nèi)部接收一個(gè)參數(shù)num每庆，類型是Number隔节；
點(diǎn)擊加號(hào)觸發(fā)add方法鹅经，首先把init狀態(tài)變?yōu)閒alse，然后數(shù)字+1怎诫，同時(shí)觸發(fā)numChange方法將改變的數(shù)字傳到組件外部瘾晃；
點(diǎn)擊減號(hào)觸發(fā)sub方法，數(shù)字-1幻妓，如果數(shù)字為0則把init狀態(tài)變?yōu)閠rue蹦误，同時(shí)觸發(fā)numChange方法將改變的數(shù)字傳到組件外部。
將組件數(shù)據(jù)傳到外部的方法為this.triggerEvent('方法名',{要傳遞的數(shù)據(jù)})肉津。
2. 引入組件
在index.wxml里引入組件：
<num-controller num="{{num}}" bindnumChange="numChange"></num-controller>
index.json
{
"usingComponents": {
"num-controller": "/components/num-controller/num-controller"http://組件地址
}
}
在json文件里注冊(cè)組件强胰。
index.js
data: {
num: 1
},
numChange(e) {
const numi = e.detail;
}
data里的num是從組件外傳入的num，在numChange方法里用e.detail可以拿到組件內(nèi)部通過this.triggerEvent傳出來的數(shù)據(jù)
