一.速度上手：
?? 🌻你好呀(*′▽｀)ノノ。vue插槽是比较常见的一个知识点，所以下面快速的介绍下它的用法。简单来说，vue插槽的作用就是父组件可以向子组件传递内容，同时，他还可以扩展、复用和定制组件。
??什么意思？比如我定义了一个父组件和一个子组件，当我在父组件里引用的子组件标签里写的内容是显示不出来的。如下：
??比如，有一个 Father.vue的组件，它引入了子组件Children.vue，同时在子组件标签里定义了一个h1标题。
<template>
<div>
此乃父组件区域
<hr />
<Children>
<h1>我乃父组件书写的内容</h1>
</Children>
</div>
</template>
子组件Children.vue内容：
<template>
<div>
此乃子组件区域
<slot></slot>
</div>
</template>
运行效果如下，自然定义的h1标签里的内容不会显示：
但是，当我在子组件Children.vue里定义一个slot插槽，它便可以显示父组件书写的内容：
修改子组件Children.vue内容：
<template>
<div>
此乃子组件区域
<slot></slot>
</div>
</template>
看运行效果，子组件区域显示了h1标签里的内容：
所以说，vue插槽的作用就是父组件可以向子组件传递内容。同时，他还可以扩展、复用和定制组件。
复用和定制简单说明：
?如果我父组件在下面重新再重新引入一次子组件，但是这个子组件标签里定义内容不一样，那么它显示的是自己的内容：
<template>
<div>
此乃父组件区域
<hr />
<Children>
<h1>我乃父组件书写的内容1</h1>
</Children>
<Children>
<h1>我乃父组件书写的内容2</h1>
</Children>
</div>
</template>
效果如下，自己显示自己的内容：
二.插槽类型：
1. 默认插槽：
??很简单，就是如果我在子组件的< slot >< slot >插槽可以定义一些默认内容，如果父组件引入子组件然后什么都没写，那么显示默认值，如果父组件那写了，覆盖掉默认值：
在子组件插槽里写点内容：
<template>
<div>
此乃子组件区域
<slot>
<h1>吾乃插槽默认内容</h1>
</slot>
</div>
</template>
父组件只是引用子组件：
<template>
<div>
此乃父组件区域
<hr />
<Children></Children>
</div>
</template>
此时会显示默认内容：
但是，如果在父组件里写了内容，那么会传递给子组件的插槽，并覆盖掉默认值：
<template>
<div>
此乃父组件区域
<hr />
<Children>
<h1>吾乃传递给子组件的内容</h1>
</Children>
</div>
</template>
子组件不变：
<template>
<div>
此乃子组件区域
<slot>
<h1>吾乃插槽默认内容</h1>
</slot>
</div>
</template>
默认值被覆盖掉：
2.具名插槽：
顾名思义，就是给插槽起名。当有多个插槽时，肯定得定义名字来区分，看看你想显示什么内容。
比如，我在子组件里定义了3个插槽，并给它们默认值，同时通过 name=名字 属性给他们定义姓名：
<template>
<div>
此乃子组件区域
<slot name="one">
<h1>吾乃插槽默认内容一号</h1>
</slot>
<slot name="two">
<h1>吾乃插槽默认内容二号</h1>
</slot>
<slot name="three" ee>
<h1>吾乃插槽默认内容三号</h1>
</slot>
</div>
</template>
??那么，我们在父组件引入子组件时，要传递的内容可以指定给某个具体的插槽。写法为把传递内容都写在< template >< template/ > 里，同时通过v-slot：插槽名字来实现效果，如下，写两份内容，分别让不同插槽接收它们：
<template>
<div>
此乃父组件区域
<hr />
<Children>
<template v-slot:one>
<h1>插槽一号显示我</h1>
</template>
<template v-slot:two>
<h2>插槽二号显示我</h2>
</template>
</Children>
</div>
</template>
效果如下，没人传递给插槽three，所以它还是默认值：
简写形式，如 v-slot：one 可以简写为 #one
3.作用域插槽：
??简单来说就是子组件作用域的数据能传递给父组件，并且在父组件的引入的子组件的标签里可以引用，那么它也就可以覆盖掉子组件里插槽的默认值。直接上例子，如下：
在子组件定义了一个变量blog，值为"北极光之夜。"，我们可以把这个blog的值传递给父组件接收，写法如下：
在插槽里定义 v-bind：自定义一个名称 = “ 要传递的值 ”
如我自定义一个giveBlog，同时传递 blog这个变量的值：
<template>
<div>
此乃子组件区域
<slot v-bind:giveBlog="blog">
<h1>吾乃插槽默认内容</h1>
</slot>
</div>
</template>
<script>
export default {
data() {
return {
blog: "北极光之夜。",
};
},
};
</script>
父组件接收方法如下，要在template标签里写：
v-slot:default=“自定义一个名称”
引用 {{ 自定义名称 .子组件自定义的名称 }}
如下，引用那个blog的数值：
<template>
<div>
此乃父组件区域
<hr />
<Children>
<template v-slot:default="getBlog">
{{ getBlog.giveBlog }}
</template>
</Children>
</div>
</template>
看，效果如下，变量blog的值显示了：
注意，v-slot:default=“getBlog” 里的 default 表示默认，如果插槽有名字，那么替换为插槽的名字即可。
三.总结：
??🌊🌊🌊上面就是 vue 插槽的一些简简单单的介绍的内容啦，总结起来就是，vue插槽的作用为父组件可以向子组件传递内容。同时，它还可以扩展、复用和定制组件。其中主要通过 slot 的不同形式的用法实现效果。那么，下次见啦，ヾ(￣▽￣)ByeBye ~
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~