微信小程序 插槽的使用

前言：之前竟然听到有人跟我说 微信小程序没有组件插槽功能哈哈，看看这是什么！
这里我整理了一下 微信小程序 组件插槽slot 的使用方式：

一、单个插槽（基本使用）

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

自定义组件模板：

<view class="mycomponent">
  <view>这里是组件的内部节点view>
  <slot>slot>
view>
1
2
3
4
5

引用组件的页面模板：

<view>
  <mycomponent>
    
    <view>这里是插入到组件 slot 中的内容view>
  mycomponent>
view>
1
2
3
4
5
6
7

自定义组件标签内内容将被放置在组件 的位置上

组件模板等同于：

<view class="mycomponent">
  <view>这里是组件的内部节点view>
  <view>这里是插入到组件 slot 中的内容view>
view>
1
2
3
4
5

二、多个插槽（具名插槽）

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

自定义组件 js：

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },
})
1
2
3
4
5

此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。

自定义组件模板：

<view class="mycomponent">
  <slot name="before">slot>
  <view>这里是组件的内部节点view>
  <slot name="after">slot>
view>
1
2
3
4
5
6

使用时，用 slot 属性来将节点插入到不同的 slot 上。

引用组件的页面模板：

<view>
  <mycomponent>
    
    <view slot="before">这里是插入到组件slot name="before"中的内容view>
    
    <view slot="after">这里是插入到组件slot name="after"中的内容view>
  mycomponent>
view>
1
2
3
4
5
6
7
8
9

效果等同于：

<view class="mycomponent">
  <view slot="before">这里是插入到组件slot name="before"中的内容view>
  <view>这里是组件的内部节点view>
  <view slot="after">这里是插入到组件slot name="after"中的内容view>
view>
1
2
3
4
5