组件A支持单个内容槽
a.json
{
"component": true
}
a.wxml
<view class="inner">
<slot></slot>
</view>
a.js
Component({})
在B中使用组件A
b.json
{
"usingComponents": {
"component-a": "../components/a"
}
}
b.wxml
<view>
<component-a>
单个内容槽内容
</component-a>
</view>
b.js
Page({})
组件C支持多个内容槽
需要在 options
中设置 mutipleSlots
为 true
c.json
{
"component": true
}
c.wxml
<view class="inner">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
c.js
Component({
options: {
mutipleSlots: true
}
})
在D中使用组件C
d.json
{
"usingComponents": {
"component-c": "../components/c"
}
}
d.wxml
<view>
<component-c>
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-c>
</view>
d.js
Page({})