前言:之前竟然听到有人跟我说 微信小程序没有组件插槽功能哈哈,看看这是什么!
这里我整理了一下 微信小程序 组件插槽slot 的使用方式:
一、单个插槽(基本使用)
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。
在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。
自定义组件模板:
<!-- 组件模板 -->
<view class="mycomponent">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
引用组件的页面模板:
<!-- 引用组件的页面模板 -->
<view>
<mycomponent>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件 slot 中的内容</view>
</mycomponent>
</view>
自定义组件标签内内容将被放置在组件 <slot>
的位置上
组件模板等同于:
<!-- 引用组件的页面模板 -->
<view class="mycomponent">
<view>这里是组件的内部节点</view>
<view>这里是插入到组件 slot 中的内容</view>
</view>
二、多个插槽(具名插槽)
默认情况下,一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时,可以在组件 js 中声明启用。
自定义组件 js:
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
},
})
此时,可以在这个组件的 wxml 中使用多个 slot ,以不同的 name 来区分。
自定义组件模板:
<!-- 组件模板 -->
<view class="mycomponent">
<slot name="before"></slot>
<view>这里是组件的内部节点</view>
<slot name="after"></slot>
</view>
使用时,用 slot 属性来将节点插入到不同的 slot 上。
引用组件的页面模板:
<!-- 引用组件的页面模板 -->
<view>
<mycomponent>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</mycomponent>
</view>
效果等同于:
<view class="mycomponent">
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<view>这里是组件的内部节点</view>
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</view>