点击左上方“熊吱”关注我们吧！在Vue组件的使用过程中，常常会遇到组件大体框架相同，但是部分内容在不同页面上显示需求不同的情况，此时就可以使用插槽，类似于在组件中挖一个坑，可以进行组件模板的替换。
1
slot基本使用
插槽功能通过标签：来实现。
首先我们实现一个template，其中使用slot标签添加了一个插槽，插槽中放置了一个按钮标签，当组件标签中未添加内容时，就会默认显示按钮标签。
我是组件模板
我是组件模板默认按钮接着在DOM中对组件标签使用：
我是P标签
我是P标签
我是span标签我是i标签
显示效果：
可以看出：
可直接在模板中使用一组标签进行插槽的添加；
若slot标签中添加了内容，但DOM使用组件标签未填充元素，slot标签中的内容会作为默认值显示。
DOM中组件标签中填充的内容，无论一个或多个，都会替换slot标签默认值，一起作为替换元素。
2
具名插槽
有时我们使用组件时需要多个插槽，就需要区分开每个插槽。
slot标签可以通过name属性给每个插槽命名：
左边中间右边
上述代码中，定义了left、right两个具名插槽，中间还有一个无名插槽，无名插槽有一个默认的名字：default。
在DOM中给插槽提供内容时，需要在元素上使用v-slot指令，并且在v-slot后跟上插槽的名称：
left插槽 默认插槽 right插槽
没有被template包裹的内容会传入到无名插槽中。
注：v-slot指令只能添加在标签上(除了独占默认插槽的缩写语法，见3.1节)。
2.1 v-slot语法糖
v-slot:可以使用语法糖#来替换，例如v-slot:right可以写为#right。
3
编译作用域
组件都有自己的编译作用域，比如在子组件中定义的data内容，在父组件中是不能访问的。但是在使用插槽的时候，有时往往需要替换的插槽内容能够访问子组件的数据，就会用到插槽Props。
下列代码中，子组件的data定义了一个user对象，其中包含firstname与lastname的值，为了在父组件中能访问到user，我们就将user作为slot元素的一个attribute，通过v-bind绑定在slot标签上，此时被绑定的user就叫做插槽Props。
子组件的template如下：
{{user.lastname}}
然后在父级作用域中，使用v-slot来定义插槽Props的名字，这里使用的名称为slotProps，名称可以自定义，然后就可以在Mustache语法中使用插槽名称.插槽Props.属性来访问子组件的数据：
{{slotProps.user.firstname}}
3.1 独占默认插槽的缩写语法
在第二节最后说到v-slot只能绑定在template上，而下面这种情况就是唯一的例外：当被提供的内容只有默认插槽(除了默认插槽不能再含有具名插槽或多个插槽)时，组件的标签才可以被当做插槽的模板来使用，有以下两种写法：{{slotProps.user.firstname}} {{slotProps.user.firstname}}
ENDVue之路系列文章：Vue之路 | 07-Vue组件化实现和使用Vue之路 | 06-表单绑定v-modelVue之路 | 05-v-on、v-if、v-forVue之路 | 04-计算属性computedVue之路 | 03-插值操作与V-bindVue之路 | 02-VSCODE添加Vue模板Vue之路 | 01-Vue安装与初体验
微信：熊吱
扫码关注我们
互联网知识交流平台
你的每个赞和在看，我都喜欢！
