微信小程序-单个插槽

什么是插槽

• 插槽就是一个开放的接口，和现实生活中的 USB 插槽一样
• 通过插槽开放接口之后，接口要连接什么内容由使用者决定
• 所以小程序中，插槽就是一块待替换占位区域，等待使用者使用的时候替换

如何使用插槽

炒鸡简单，在需要预留的地方使用 <slot> 元素即可。

案例

首先我们创建一个组件，组件大致的内容就是仿造我们常见的京东页面首页的一个 Nav(导航条)，直接上 Nav 源码：

<!--components/c-test/c-test.wxml-->
<view class="container">
  <view class="left">
    <text>菜单</text>
  </view>
  <view class="center">
    <text>中间区域</text>
  </view>
  <view class="right">
    <text>登录</text>
  </view>
</view>

/* components/c-test/c-test.wxss */
.container {
  width: 100%;
  height: 80rpx;
  background: #999;
  display: flex;
  align-items: center;
}

.center {
  width: 100%;
  text-align: center;
  background: #f00;
}

.left, .right {
  white-space: nowrap;
}

使用我们自定义的 Nav：

<!--index.wxml-->
<myNav/>

假设我现在有一个需求，想让中间的内容，根据我传入的元素进行展示对应的内容，这个就可以使用我们的插槽进行实现，这里也将会带着大家来使用插槽的用法，更改我们的 Nav 的 wxml 文件：

<!--components/c-test/c-test.wxml-->
<view class="container">
  <view class="left">
    <text>菜单</text>
  </view>
  <view class="center">
    <slot></slot>
  </view>
  <view class="right">
    <text>登录</text>
  </view>
</view>

在我们的首页使用 Nav 的时候也需要进行改造，要告诉我们的插槽，Nav 当中用什么来进行填充：

<!--index.wxml-->
<myNav>
  <input type="text"/>
</myNav>
<myNav>
  <button>我是按钮</button>
</myNav>

到这里我们的插槽就使用到了，是不是炒鸡简单。