微信小程序slot插槽的使用方法---单插槽和多插槽

Posted 2021-07-22 xianlong_Huang

1. slot的简单介绍

组件的插槽是为了让我们封装的组件更具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。
例如购物网站中的搜索导航栏，他们都有相同的部分，我们可以保留它们相同的部分，只需要给它们不相同的部分定义一个插槽即可。

2. 单个插槽的使用方法

（1）封装组件，创建slot组components/my-slot/my-slot，并在my-slot.wxml中写好插槽的内容。

<!--components/my-slot/my-slot.wxml-->
<view>
  <text>我是标准的内容</text>
  <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
  <slot></slot>
</view>

（2）在显示界面引入my-slot组件，在pages/index/index.json中加入以下代码

{
  "usingComponents": {
    "my-slot":"/components/my-slot/my-slot"
  }
}

（3）在pages/index/index.wxml页面使用my-slot，只需要在my-slot组件内写进自己的内容即可使用插槽。

<my-slot>
	<view>此处是我定制的内容</view>
</my-slot>

3. 多个插槽的使用方法

（1）封装组件，创建slot组components/my-slot/my-slot，并在my-slot.wxml中写好插槽的内容，此处定义多个插槽，并用name属性来区分。

<!--components/my-slot/my-slot.wxml-->
<view>
  <text>我是标准的内容</text>
  <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
  <slot name="slot1"></slot>
  <slot name="slot2"></slot>
</view>

(2)在components/my-slot/my-slot.js文件中启用插槽，只有启用了插槽，多插槽才能正常使用。

//components/my-slot/my-slot.js
Component({
  // 启用插槽
  options: {
    multipleSlots: true
  }
})

（3）在显示界面引入my-slot组件，在pages/index/index.json中加入以下代码

{
  "usingComponents": {
    "my-slot":"/components/my-slot/my-slot"
  }
}

（4）在pages/index/index.wxml页面使用my-slot，只需要在my-slot组件内按name属性来写进自己的内容即可使用多插槽。

<my-slot>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="slot1">我是定制的内容1</view>
  <view slot="slot2">我是定制的内容2</view>
</my-slot>