微信小程序中使用slot插槽

1、slot: 组件的插槽是为了让我们封装的组件更具有扩展性
让使用者可以决定组价内部的一些内容到底展示什么
例如移动网站中的导航栏

2、

单个插槽的使用：

注意： 在slot组件页面中slot可以是单标签也可以是双标签，而在页面使用时必须是双标签

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

<!--第二步：引入组件，pages/index/index.wxml-->
<view>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是定制的内容</view>
</view>

3、多个插槽slot的使用

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

一定要记得在js文件中启用插槽

// 第二步：启用插槽，components/slot/slot.js
Component({
  // 启用插槽
  options: {
    multipleSlots: true
  }
})
 

<!--第三步：引用组件，pages/index/index.wxml-->
<view>
<view slot="custom2">我是定制的内容2</view>
</view>

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