理解
Vue组件化中，当我们在设计一个组件的时候，可能会保留一部分，让使用者自定义的内容，比如：
- 导航栏组件中，右上角的分享按钮，左上角做菜单按钮
- 弹出框组件中，弹出框的提示内容等
- ...
在这种场景下，把保留给使用者的部分，叫做插槽(slot)
插槽分类
匿名插槽
理解：
- 所谓匿名插槽，就是这个插槽里，没有声明任何名称，使用者放进来的东西，都扔进这个插槽中。
- 匿名插槽是一种特殊的具名插槽，也就是名为
default的插槽
写法：
//自定义组件中
<template>
<div>
<slot><slot>//匿名插槽
</div>
</template>
//页面(使用者)使用
<template>
<div>
<myComponent><p>我被放进了插槽中</p></myComponent>
</div>
</template>
代码中我被放进了插槽中这句话，就进入了自定义组件的匿名插槽中，从而变成了
//自定义组件中
<template>
<div>
<div>
<p>我被放进了插槽中</p><!-- 匿名插槽中放入了内容 -->
</div>
</div>
</template>
具名插槽
理解：所谓具名插槽，就是这个插槽里，这个插槽被命了名，使用者放进来的东西，声明了插槽的名称，会被分发进这个具名插槽中。
写法：使用template标签声明具名插槽名称<template v-slot:插槽名></template>
//自定义组件中
<template>
<div>
<div class='slot1'>
<slot name='slot1'><slot><!-- 名为“slot1”的具名插槽 -->
</div>
<div class='slot2'>
<slot name='slot2'><slot><!-- 名为“slot2”的具名插槽 -->
</div>
<slot><slot>//这里是个匿名插槽
</div>
</template>
//页面(使用者)使用
<template>
<div>
<myComponent>
<template v-slot:slot1>
<p>名为slot1的具名插槽中</p>
</template>
<a>啦啦啦啦德玛西亚</a>
<template v-slot:slot2>
<p>名为slot2的具名插槽中</p>
</template>
<p>啦啦啦啦德玛西亚</p>
</myComponent>
</div>
</template>
代码被分发到对应插槽后的内容
//自定义组件中
<template>
<div>
<div class='slot1'>
<div>
<p>名为slot1的具名插槽中</p>
</div>
</div>
<div class='slot2'>
<div>
<p>名为slot2的具名插槽中</p>
</div>
</div>
<div>
<a>啦啦啦啦德玛西亚</a>
<p>啦啦啦啦德玛西亚</p>
</div>
</div>
</template>
作用域插槽
理解：一种能够将子组件可用的内容暴露给父组件的插槽。
比如：我们有的时候，需要一些子组件里的东西，做内容拼接，就像一个用户名输入框，我们希望所有的用户名，都跟随一个user_的前缀，此处就可以使用到作用域插槽
//自定义组件中
<template>
<div>
<slot :user='username'><slot>//匿名插槽
</div>
</template>
<script>
export default {
data(){
return {
username:{
prefix:"user_"
}
}
}
}
</script>
//页面(使用者)使用
<template>
<div>
<myComponent v-slot='obj'>
{{obj.user.prefix}}小寒大人
</myComponent>
</div>
</template>
编译后的结果就变成了
<template>
<div>
<div>
user_小寒大人
</div>
</div>
</template>
默认值(后备内容)
理解
插槽是拥有默认值功能的，如果对应的slot没有传入内容，则会使用slot的默认值
写法
以匿名参数为例
//自定义组件中
<template>
<div>
<slot><p>这里是默认的内容</p></slot>
</div>
</template>
//页面(使用者)使用
<template>
<div>
<myComponent></myComponent>
<myComponent>替换了</myComponent>
</div>
</template>
最终表现结果为
<template>
<div>
<div>
<p>这里是默认的内容</p>
</div>
<div>
替换了
</div>
</div>
</template>
动态插槽名
理解
可以使用动态值来定某些内容进入某些具名插槽中
写法
正常的具名插槽为v-slot:插槽名，动态的写法为v-slot:[dynamicSlotName]，此写法仅在vue2.6.0后的vue中版本使用
简写插槽名
正常的具名插槽为v-slot:插槽名，简写的写法为#插槽名，此写法仅在vue2.6.0后vue中版本使用
