组件源码
//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
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
close() {
// 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项
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使用
- 组件内使用slot标签，
- 开启slot使用
Component({
options:{
multipleSlots: true
},
})
- 页面使用slot,
<mask-wrapper content-wrapper="contentWrapper">
<view slot="content" >
123
</view>
</mask-wrapper>
注：除了第二步，和正常使用slot基本一致
外部class引用
- 传入样式,和传参不太一样，需要使用
externalClasses接收，类似props写法，[]内部值取决于引用组件时定义的属性名
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接收并冲命名，
使用重命名之后的类名，在组件内部使用。 - 外部引用属性名需要和组件中
externalClasses接收值一致
