最近被问起是否理解vue的插槽（slot），咋一想发现，仿佛很少用到这玩意。所以整顿了下slot的一些用法。

slot (父组件 在子组件<slot> </slot>处插入内容)
Vue 实现了一套内容散发的 API，将<slot>元素作为承载散发内容的进口，这是vue文档上的阐明。具体来说，slot就是能够让你在组件内增加内容的‘空间’。举个例子：

//子组件 ： (假如名为：ebutton)

<template>  <div class= 'button'>      <button>  </button>  </div></template>//父组件：（援用子组件 ebutton）<template>  <div class= 'app'>     <ebutton> </ebutton>  </div></template>

咱们晓得，如果间接想要在父组件中的<ebutton></ebutton> 中增加内容，是不会在页面上渲染的。那么咱们如何使增加的内容可能显示呢？在子组件内增加slot 即可。

//子组件 ： (假如名为：ebutton)<template>  <div class= 'button'>      <button></button>      <slot></slot>       //slot 能够放在任意地位。（这个地位就是父组件增加内容的显示地位）  </div> </template>

子组件能够在任意地位增加slot , 这个地位就是父组件增加内容的显示地位。

编译作用域 （父组件 在子组件<slot> </slot>处插入 data）
下面咱们理解了，slot 其实就是可能让咱们在父组件中增加内容到子组件的‘空间’。咱们能够增加父组件内任意的data值，比方这样：

//父组件：（援用子组件 ebutton）<template>  <div class= 'app'>     <ebutton> {{ parent }}</ebutton>  </div></template>new Vue({  el:'.app',  data:{    parent:'父组件'  }})

应用数据的语法齐全没有变，然而，咱们是否间接应用子组件内的数据呢？显然不行！！

// 子组件 ： (假如名为：ebutton)<template>  <div class= 'button'>      <button> </button>       <slot></slot>  </div></template>new Vue({  el:'.button',  data:{    child:'子组件'  }})// 父组件：（援用子组件 ebutton）<template>  <div class= 'app'>     <ebutton> {{ child }}</ebutton>  </div></template>

间接传入子组件内的数据是不能够的。因为：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容 (子组件<slot> </slot>设置默认值)
所谓的后背内容，其实就是slot的默认值，有时我没有在父组件内增加内容，那么 slot就会显示默认值，如：

//子组件 ： (假如名为：ebutton)<template>  <div class= 'button'>      <button>  </button>      <slot> 这就是默认值 </slot>  </div></template>

具名插槽 （子组件 多个<slot ></slot> <slot></slot> 对应插入内容）
有时候，兴许子组件内的slot不止一个，那么咱们如何在父组件中，准确的在想要的地位，插入对应的内容呢？ 给插槽命一个名即可，即增加name属性。

//子组件 ： (假如名为：ebutton)<template>  <div class= 'button'>      <button>  </button>      <slot name= 'one'> 这就是默认值1</slot>      <slot name='two'> 这就是默认值2 </slot>      <slot name='three'> 这就是默认值3 </slot>  </div></template>父组件通过v-slot : name 的形式增加内容：//父组件：（援用子组件 ebutton）<template>  <div class= 'app'>     <ebutton>         <template v-slot:one> 这是插入到one插槽的内容 </template>        <template v-slot:two> 这是插入到two插槽的内容 </template>        <template v-slot:three> 这是插入到three插槽的内容 </template>     </ebutton>  </div></template>

当然 vue 为了不便，书写 v-slot:one 的模式时，能够简写为 #one

作用域插槽 ( 父组件 在子组件 <slot> </slot> 处应用子组件 data)
通过slot 咱们能够在父组件为子组件增加内容，通过给slot命名的形式，咱们能够增加不止一个地位的内容。然而咱们增加的数据都是父组件内的。下面咱们说过不能间接应用子组件内的数据，然而咱们是否有其余的办法，让咱们可能应用子组件的数据呢？ 其实咱们也能够应用v-slot的形式：

//子组件 ： (假如名为：ebutton)<template>  <div class= 'button'>      <button>  </button>      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot  </div>           </template>new Vue({  el:'.button',  data:{    child1:'数据1',    child2:'数据2'  }})//父组件：（援用子组件 ebutton）<template>  <div class= 'app'>     <ebutton>         // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue         <template v-slot:one = 'slotonevalue'>             {{ slotonevalue.value1 }}        </template>        // 同上，因为子组件没有给slot命名，默认值就为default        <template v-slot:default = 'slottwovalue'>            {{ slottwovalue.value2 }}        </template>     </ebutton>  </div></template>

总结来说就是：

首先在子组件的slot上动静绑定一个值( :key='value')
而后在父组件通过v-slot : name = ‘values ’的形式将这个值赋值给 values
最初通过{{ values.key }}的形式获取数据