共计 2726 个字符，预计需要花费 7 分钟才能阅读完成。
最近被问起是否理解 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}} 的形式获取数据
