組件源碼
//wxml
<view class="modal" >
<view class="cover"></view>
<view class="default-content-wrapper content-wrapper">
<slot name="content"></slot>
</view>
</view>
//js
Component({
/**
* 組件的屬性列表
*/
properties: {
showModal: {
type: Boolean,
value: false,
},
},
//傳入樣式
externalClasses: ['content-wrapper'],
/**
* 啟用插槽
*/
options:{
multipleSlots: true
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 組件的方法列表
*/
methods: {
close() {
// 使用 triggerEvent 方法觸發(fā)自定義組件事件睹欲，指定事件名、detail對象和事件選項(xiàng)
this.triggerEvent("close");
},
}
})
使用
//json 注冊
"usingComponents": {
"mask-wrapper":"/components/maskWrapper/maskWrapper"
}
//wxml使用
<mask-wrapper content-wrapper="contentWrapper">
<view class="" slot="content" >
123
</view>
</mask-wrapper>
slot使用
- 組件內(nèi)使用slot標(biāo)簽崇摄，
- 開啟slot使用
Component({
options:{
multipleSlots: true
},
})
- 頁面使用slot,
<mask-wrapper content-wrapper="contentWrapper">
<view slot="content" >
123
</view>
</mask-wrapper>
注：除了第二步，和正常使用slot基本一致
外部class引用
- 傳入樣式,和傳參不太一樣慌烧，需要使用
externalClasses接收逐抑，類似props寫法，[]內(nèi)部值取決于引用組件時(shí)定義的屬性名
Component({
externalClasses: ['content-wrapper'],
})
- 組件掛載樣式屹蚊，同普通class類名相同厕氨，正常使用即可，
content-wrapper
<view class="default-content-wrapper content-wrapper">
<slot name="content"></slot>
</view>
- 外部傳入
content-wrapper="contentWrapper"汹粤，這里類似傳參
<mask-wrapper content-wrapper="contentWrapper">
<view class="" slot="content" >
123
</view>
</mask-wrapper>
注：
- 外部class類名通過傳參形式傳入組件命斧，組件通過
externalClasses接收并沖命名，
使用重命名之后的類名嘱兼，在組件內(nèi)部使用冯丙。 - 外部引用屬性名需要和組件中
externalClasses接收值一致
