開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件讨惩，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊氏身，有助于代碼維護巍棱。自定義組件在使用時與基礎組件非常相似。
使用方法
一蛋欣、
創(chuàng)建一個Component 頁面
一個自定義組件由 json wxml wxss js 4個文件組成
在 wxml wxss 中進行組件的樣式編寫
二航徙、
在自定義組件 js中 properties 進行自定義組件的屬性編寫
properties: {
// 屬性名稱
label:{
//類型
type:String,
//默認值
value:''
},
count:{
type:Number,
value:0
},
max:{
type:Number,
value:999
},
min:{
type:Number,
value:0
}
自定義組件 wxml 頁面
//label 為數(shù)據(jù)綁定
<view class="label">{{label}}</view>
<view class="shop">
<view class="label">{{label}}</view>
<view class="btns">
<view class="btn" bindtap="jian">-</view>
<view class="count">{{count}}</view>
<view class="btn" bindtap="jia">+</view>
</view>
</view>
自定義組件js 頁面
// methods l里面主要寫方法
methods: {
//減方法
jian(){
//count 值小于min值時 不在觸發(fā)
if(this.data.count<=this.data.min){
return
}
this.data.count--
//更新數(shù)據(jù)的同時重新渲染頁面
this.setData({
count:this.data.count
})
//自定義方法 當jian()執(zhí)行時 自定義方法 synccount 執(zhí)行 向頁面?zhèn)骰豤ount值
this.triggerEvent("synccount",this.data.count)
},
//加方法
jia(){
//count 值大于max值時 不在觸發(fā)
if(this.data.count>this.data.max){
return
}
this.data.count++
//更新數(shù)據(jù)的同時重新渲染頁面
this.setData({
count:this.data.count
})
this.triggerEvent("synccount",this.data.count)
},
}
使用自定義組件需要在全局或者局部的json中導入
//名稱 自己起的名字 文件路徑
"countent":"../../components/count/countent"
在需要使用的頁面中使用自定義組件
//組件名稱跟剛剛所引入的名稱相同
把剛剛寫屬性添加進去 自定義的方法
<countent label="數(shù)字：" bind:synccount="synccount"></countent>
使用自定義組件js頁面
//自定義方法 e 為默認傳參
synccount(e){
//結(jié)構(gòu)出 detail 中的參數(shù) 即為 自定義方法傳回的參數(shù)
let {detail}=e
//更新數(shù)據(jù)的同時 重新渲染頁面
this.setData({
count:detail
})
},
自定義插件效果圖
QQ圖片20211118195000.png
