概要
Vue3（其实从2.6开始）中引入了一个新的指令v-slot，用来表示具名插槽和默认插槽
基础示例
<!-- default slot -->
<foo v-slot="{ msg }">
{{ msg }}
</foo>
<!-- named slot -->
<foo>
<template v-slot:one="{msg}">
{{ msg }}
</template>
</foo>
为什么要这么做
在v2.5中介绍了slot-scope，可以直接在插槽元素上使用。
<foo>
<div slot-scope="{ msg }">
{{ msg }}
</div>
</foo>
同样的，我们也可以在组件上这样使用。
<foo>
<bar slot-scope="{ msg }">
{{ msg }}
</bar>
</foo>
然而，上面的示例会导致一个问题：slot-scope的位置不能清晰的反映出这个作用域变量是哪一个 组件提供的。上面例子中slot-scope是写在<bar>组件上，但是实际上这个作用域变量的定义是有<foo>组件的默认插槽提供的。
当嵌套的层级越深，情况就会变得越糟。
<foo>
<bar slot-scope="foo">
<baz slot-scope="bar">
<div slot-scope="baz">
{{ foo }} {{ bar }} {{ baz }}
</div>
</baz>
</bar>
</foo>
像上面这种情况，我们无法立即分辨出模板上作用域变量是由那一个组件提供的。
细节设计
引入一个新的指令v-slot
我们可以在slot容器<template>上使用v-slot来表示一个传入组件的插槽，通过指令参数来表示插槽的名称。
<foo>
<template v-slot:header>
<div class="header"></div>
</template>
<template v-slot:body>
<div class="body"></div>
</template>
<template v-slot:footer>
<div class="footer"></div>
</template>
</foo>
作用域插槽的内部工作原理是将插槽的内容包裹在一个函数里
function(slotProps){
// 插槽内容
}
这就意味着v-slot的值实际上可以是任何能够作为函数定义中的参数的Javascript表达式，所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
<foo>
<template v-slot:header="{ msg }">
<div class="header">
Message from header slot: {{ msg }}
</div>
</template>
</foo>
v-slot可以直接用在组件上，如果没有参数，则表示默认的作用域插槽，传递给默认插槽的属性应该作为变量在其属性值声明。
<foo v-slot="{ msg }">
{{ msg }}
</foo>
新旧语法对比
-
对于常用的场景（只有一个默认的作用域插槽）
<foo v-slot="{msg}">{{msg}}</foo> -
作用域变量与组件之间的联系更加的清晰
<!-- old --> <foo> <bar slot-scope="foo"> <baz slot-scope="bar"> <div slot-scope="baz"> {{ foo }} {{ bar }} {{ baz }} </div> </baz> </bar> </foo>使用新语法也可以达到同样的效果
<foo v-slot="foo"> <bar v-slot="bar"> <baz v-slot="baz"> {{ foo }} {{ bar }} {{ baz }} </baz> </bar> </foo>
注意：组件提供的作用域变量依然声明在当前组件上,新的语法更清晰的展示出组件与作用域变量的关系。(父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。)
动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：
<foo>
<template v-slot:[slotName]>
...
</template>
</foo>
插槽指令的缩写
和 v-bind和v-on相似，缩写只有在存在参数时才生效，这就意味着v-slot没有参数时不能使用#=,对于默认插槽，可以使用#default来代替v-slot
<!-- full syntax -->
<foo>
<template v-slot:header="{ msg }">
Message from header: {{ msg }}
</template>
<template v-slot:footer>
A static footer
</template>
</foo>
<!-- shorthand -->
<foo>
<template #header="{ msg }">
Message from header: {{ msg }}
</template>
<template #footer>
A static footer
</template>
</foo>
<foo v-slot="{ msg }">
{{ msg }}
</foo>
<foo #default="{ msg }">
{{ msg }}
</foo>
更多的用例对比
默认的文本作用域插槽
<!-- old -->
<foo>
<template slot-scope="{ msg }">
{{ msg }}
</template>
</foo>
<!-- new -->
<foo v-slot="{ msg }">
{{ msg }}
</foo>
默认的含DOM节点的插槽
<!-- old -->
<foo>
<div slot-scope="{msg}">
{{msg}}
</div>
</foo>
<!-- new -->
<foo v-slot="{msg}">
<div>
{{msg}}
</div>
</foo>
嵌套的默认插槽
<!-- old -->
<foo>
<bar slot-scope="foo">
<baz slot-scope="bar">
<template slot-scope="baz">
{{ foo }} {{ bar }} {{ baz }}
</template>
</baz>
</bar>
</foo>
<!-- new -->
<foo v-slot="foo">
<bar v-slot="bar">
<baz v-slot="baz">
{{ foo }} {{ bar }} {{ baz }}
</baz>
</bar>
</foo>
命名插槽
<!-- old -->
<foo>
<template slot="one" slot-scope="{ msg }">
text slot: {{ msg }}
</template>
<div slot="two" slot-scope="{ msg }">
element slot: {{ msg }}
</div>
</foo>
<!-- new -->
<foo>
<template v-slot:one="{ msg }">
text slot:{{msg}}
</template>
<template v-slot:two="{msg}">
<div>
element slot: {{msg}}
</div>
</template>
</foo>
嵌套 & 命名 / 默认
<!-- old -->
<foo>
<bar slot="one" slot-scope="one">
<div slot-scope="bar">
{{ one }} {{ bar }}
</div>
</bar>
<bar slot="two" slot-scope="two">
<div slot-scope="bar">
{{ two }} {{ bar }}
</div>
</bar>
</foo>
<!-- new -->
<foo>
<template v-slot:one="one">
<bar v-slot="bar">
<div>{{ one }} {{ bar }}</div>
</bar>
</template>
<template v-slot:two="two">
<bar v-slot="bar">
<div>{{ two }} {{ bar }}</div>
</bar>
</template>
</foo>