可以先阅读组件基础-简单了解通过插槽分发内容。
一、插槽定义
插槽将子组件标签间的内容分发到子组件模板的<slot>标签位置。
如果没有<slot>标签，那么该内容将被丢弃。
二、编译作用域
内容在哪个作用域编译，就可以访问哪个作用域的数据。
1.父级模板的作用域
在父组件的模板中定义的变量，可以在整个父组件的模板中访问，包括子组件中的插槽内容。
例如，我们在父组件中定义一个变量url，在子组件插槽内容中访问：
<template>
<div>
<navigation-link url="./index">
This URL is {
{url}}
</navigation-link>
</div>
</template>
2.子级模板的作用域
在子组件中定义的数据和变量，只能在子组件中访问，而不能在父组件中访问。
三、后备内容
插槽的后备内容即没有提供内容时的默认内容。
定义方式很简单：
<slot>Slot的默认内容</slot>
四、具名插槽
顾名思义：具有名字的插槽。
你可以为插槽指定名称name，以便将内容分发到特定的插槽中。
接着，通过在template元素上使用v-slot:插槽名参数指令使用具名插槽：
完整示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue 2 具名插槽 Demo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-layout>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
<template v-slot:header>
<h1>这里可能是一个页面标题</h1>
</template>
<template v-slot:footer>
<p>这里是一些联系信息</p>
</template>
</my-layout>
</div>
<script>
Vue.component('my-layout',{
template:`
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<!--默认插槽，隐含name为`default`-->
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
})
var vm = new Vue({
el: '#app',
});
</script>
</body>
</html>
虽然我们故意将默认插槽的内容放在了名为header的代码前面，但是结果依然按照插槽原本的顺序排列。
动态插槽名
我们可以使用动态参数绑定插槽名。
<template v-slot:[dynamicSlotName]></template>
具名插槽的缩写
v-slot指令也有缩写，即使用#替代v-slot:，这样做我们就必须明确给出其插槽名称。
五、作用域插槽
作用域插槽这个概念是指让插槽内容能够访问子组件中才有的数据。
我们只需给<slot>绑定prop，然后使用v-slot的值访问该prop。v-slot的值实际上是所有绑定的prop的集合。
上例子：
<!DOCTYPE html>
<html>
<head>
<title>Vue 2 作用域插槽 Demo</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component>
<template v-slot="slotProps">
<p>{
{slotProps.text}}</p>
</template>
</my-component>
</div>
<script>
Vue.component('my-component', {
template: `
<div>
<slot text="hello"></slot>
</div>
`
})
var vm = new Vue({
el: '#app',
});
</script>
</body>
</html>
注意，上面例子中我们v-slot指令没有带参数，实际上它默认带了个default参数，如果存在别的具名插槽，那么我就必须为v-slot指令带上参数。
通过作用域插槽的机制，我们可以实现父组件控制插槽内容来控制子组件渲染不同的结果。
额外的不相关话题：使用
v-bind指令时，什么时候加:？私以为：这取决于v-bind绑定的属性的值，其值为静态字符串，不加
:，其值若为变量或对象字面量，则加:。
解构插槽prop
事实上，插槽内容会被封装在一个函数内，v-slot的值就是其参数。
作为函数参数，我们可以使用JavaScript的解构语法，这会使得代码更简洁。
1.普通解构
<template v-slot="{text}">
<p>{
{text}}</p>
</template>
2.重命名prop
<template v-slot="{text:msg}">
<p>{
{msg}}</p>
</template>
3.指定后备内容
<template v-slot="{text={msg:'Hello'}}">
<p>{
{text.msg}}</p>
</template>