在自定义小程序wxml结构中,可以提供一个<slot>节点(插槽),用于承载组件使用者提供的wxml结构。
<view class="wrapper"><view>这里是组件的内部节点</view><slot></slot></view>
<view><component-tag-name><!-- 这部分内容将被放置在组件 <slot> 的位置上 --><view>这里是插入到组件 slot 中的内容</view></component-tag-name></view>
渲染的结果就是:
<view class="wrapper"><view>这里是组件的内部节点</view><view>这里是插入到组件 slot 中的内容</view></view>
如果你想启用多个slot插槽需要进行multipleSlots的配置:
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多 slot 支持},})
<!-- 组件模板 --><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>
