Vue中的slot标签

   vue组件中的API有三个，分别是props，events与slot。前两个分别为传参和触发事件，slot实现的是内容分发。最近使用elementUI中的组合搜索框或者添加其他自定义内容时会用到此属性。它相当于AngularJS中的transclusion，意为插槽。

  vue中的组件，可谓是相当重要的内容。slot的主要作用就是组件的组合，用来扩展组件。简单来说：

<bigbig>
 <smallsmall></smallsmall>
</bigbig>

  这样将两个自定义的组件组合起来，父组件<bigbig>也许会有自己的模板，这样<smallsmall>在里面就很尴尬，它需要一个明确的定义如何显示。此时便需要使用slot。

1.单个slot

它的含义指的就是组件模板中包含一个slot。就上个例子来说，如果<bigbig>不包含<slot>，那么<bigbig>自己本身模板中的内容将会被抛弃，只显示<smallsmall>。如果包含slot，那么<smallsmall>将会插入<slot>的内容中并且替换掉它。<slot>标签中也可以携带内容，当没有内容插入时，将显示slot标签中的内容。举个例子：

假定组件<bigbig>有如下模板：

<div>
<p>我是组件里自带的段落~</p>
<slot>如果没有需要插入的内容，就显示我啦~</slot>
</div>

现在我们要渲染以下代码：

<bigbig>
  <p>我是需要渲染的内容~</p>
</bigbig>

将显示什么结果呢？答案是先显示“我是组件里自带的段落~”再显示“我是需要渲染的内容~”。因为我们已经将其插入slot中了，并替换掉了slot中的内容。如果我们没有需要插入的内容，则会显示slot原本中的内容“如果没有需要插入的内容，就显示我啦~”

2.具名slot

它的含义简单来说就是带有名字的slot。当插槽不止一个时，为了区分他们，则需要带上名字，用法和单个slot本质上是一样的。

假定组件<bigbig>有如下模板：

 

<div>
<slot name=‘one’></slot>
<slot></slot>
<slot name=‘two’></slot>
</div>

 

接下来渲染：

<bigbig>
  <p slot='one'>111</p>
  <p slot='two'>222</p>
  <p>code</p>
</bigbig>

渲染结果为：111 code 222 。对应名称插入到对应的插槽。

3.作用域插槽

作用域插槽本质上是可以传递数据的插槽，类似于函数的传参。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。以下示例代码为转载：

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- 我们为每个 todo 准备了一个插槽，-->
    <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
    <slot v-bind:todo="todo">
      <!-- 回退的内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

<todo-list v-bind:todos="todos">
  <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
  <template slot-scope="slotProps">
    <!-- 为待办项自定义一个模板，-->
    <!-- 通过 `slotProps` 定制每个待办项。-->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>