1、抽象节点
使用场景:组件中使用其他组件但不确定使用哪一个组件
组件json中:
{
"componentGenerics": {
"selectable": true
}
}
{
"componentGenerics": {
"selectable": {
"default": "path/to/default/component"
}
}
}
调用组件时
使用generic:selectable制定抽象组件的具体调用并在json中声明组件
<selectable-group generic:selectable="custom-radio" />
{
"usingComponents": {
"custom-radio": "path/to/custom/radio",
"custom-checkbox": "path/to/custom/checkbox"
}
}
2、slot 指定name
组件中
<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
调用时
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
3、外部样式类与全局样式类
/* 组件 custom-component.js */
Component({
externalClasses: ['my-class']
})
<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>
<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
全局样式
/* 组件 custom-component.js */
Component({
options: {
addGlobalClass: true,
}
})