如果有的选我想用插槽如果有的选我想用插槽开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

您能在这里看到啥

因
果
- 插槽是啥
- 单个插槽
- 多个插槽

因

在不断的学习和实践中,终究还是避免不了动画诱惑.然后我们的UI小姐姐激动说.看我设计了一个有趣的动画.就问你怕不怕?. 哈哈哈哈.我扶住我激动的手,喝着杯里的水.淡定的说了一声.请给我gif图.哈哈哈.跑题了跑题了.后续我也会把这个动画的实现分享给大家,下面我们先看一下界面.

从上面的UI样式中,大致我分为两个层级

背景动画组件
动画状态组件

至于你说橙色状态,那也只是这两个大的模块里的状态值而已.想要完成这样的组合,有两种方法
- 把动画状态组件写到背景动画组件里面,然后组件里面根据用户传的状态值.使用if else进行界面提前的写入.
- 让背景动画组件的使用者,可以自己定义动画状态组件
第一种不是不可以.只是扩展性不够好.不够高级.为了实现第二种需求.插槽组件呼之欲出.收,我们一起学习一下插槽.

果

插槽是啥

先看一下简单的使用事例
- 在组件里使用插槽(slot)
```
 <view bindtap="tap">{{msg}}</view>
 <slot></slot>
```
- 在父组件添加文本
```
 <test class="ts" title="我是子组件" bindtest="taptest">
     <text>插槽</text>
 </test>
```
- 界面表现
从上面UI的表现层,我们可以直观的知道.插槽(slot)更像一个UI占位图.可以让使用者把自己的UI插入自定义组件特定的位置.

当然.如果你使用的组件,并未使用插槽功能.就算,你还按照在父组件添加文本方式使用的话,你会惊奇的发现啥也没有.

特别注意:插槽必须在自定义组件中使用.
单个插槽

在小程序中,默认情况下.每个自定组件中只允许使用一个插槽(slot)承担起UI占位功能.这种在个数上的限制就叫过单个插槽.
多个插槽

当然,官方也是考虑到了开发人员爱折腾的特点,小孩子才要做选择.我全要.哈哈哈,基于这样合理的需求.多个插槽应运而生.下面我们看一下怎么使用多个插槽.
1. 定义组件支持多个插槽
```
Component({
    options: {
        //设置为true即可支持多个插槽
        multipleSlots:true 
    }
})
```
2. 使用多个插槽
  - 直接使用多个插槽
```
子组件
 <slot></slot>
 <view bindtap="tap">{{msg}}</view>
 <slot></slot>
 <slot></slot>
 <slot></slot>
父组件
 <test class="ts" title="我是子组件" bindtest="taptest">
    <view>插槽</view>
    <view>插槽</view>
    <view>插槽</view>
    <view>插槽</view>
</test>
```
    - 预期结果
    - 执行结果
      
      从上面的我们可以知道,虽然使用了多个插槽.但结果是把所有的UI赋值到了第一个插槽里.和单个插槽效果是一样的.
  - 给插槽设置别名
    - 修改自定义组件
    - 修改父组件
    - 执行结果如上所见.这样就完成了多个插槽的使用.