在组件的 wxml 中可以包含 slot
节点,用于承载组件使用者提供的 wxml 结构。
默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。
javascript
Component(
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
}
properties: { /* ... */ },
methods: { /* ... */ }
)
此时,可以在这个组件的 wxml 中使用多个 slot ,以不同的 name
来区分。
html
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>
使用时,用 slot
属性来将节点插入到不同的 slot 上。
html
<!-- 引用组件的页面模板 -->
<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>
组件样式