什么是插槽
- 插槽就是一个开放的接口，和现实生活中的 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>
到这里我们的插槽就使用到了，是不是炒鸡简单。
