插槽
插槽内容
建立一个组件，组件的使用通常用其名字组成的标签，例如<myComponent>组件标签里的内容</myComponent>，在这两个标签的中间，我们可以插入一些内容，这些内容是根据需求可要可不要的，但谁知道到底什么时候会需要呢?并且，自定义组件标签便是组件模板本身，不同于原生标签那样简单。如果组件标签会被渲染成组件模板，那组件标签内的内容该渲染在哪里？于是，插槽的作用显现了。在模板内某个想要插入组件标签内容的地方，放置一对<slot></slot>，这个标签被称为插槽。插槽功能很强大，第一个功能便是上述场景，<slot></slot>可在模板某个位置事先安插，用来动态盛放并在渲染时显示组件标签里的内容。
// 组件及其标签内容
<myComponent>组件标签里的内容</myComponent>
// myComponent 组件本身
<template>
<div id="app">
<slot></slot>
</div>
</template>
// 渲染后
<div id="app">
组件标签里的内容
</div>
后备内容
与第一种作用相反，插槽作为内容分发工具，不仅仅可以作为预留空间承载组件标签里的内容，也可以提前放置内容作为组件标签内容的预备。
<button type="submit">
<slot>Submit</slot>
</button>
// 组件标签有内容
<submit-button>
Save
</submit-button>
// 组件标签无内容
<submit-button>
</submit-button>
// 渲染后的 element
<button type="submit">
Submit
</button>
插槽编译作用域
上面提到，组件标签里可以插入内容，只是需要插槽来呈现这些内容，插槽也可以设置后备内容，当组件标签没有内容时作为备用选择。
当作为呈现子组件标签内容的功能时，子组件标签里如果使用了父组件作用域的数据，插槽作为承载工具可以接收到这些内容。但如果插槽作为后备内容的作用时，插槽使用了所在子组件作用域的数据，希望可以作为子组件标签的后备内容时，是没办法传递这些数据给子组件标签的，因为子组件标签已经处在了父级作用域：
// 子组件模板
<div class="hello">
<slot></slot>
</div>
// 子组件标签
<HelloWorld>
{{message}}
</HelloWorld>
// 子组件标签所在父组件的 data
data () {
return {
message: '我是父组件内容'
}
}
// 以上内容可以渲染
// 子组件模板
<div class="hello">
<slot>{{ message }}</slot>
</div>
// 子组件标签
<HelloWorld>
</HelloWorld>
// 子组件的 data
data () {
return {
message: '我是子组件的内容'
}
}
// 插槽里的 message 作为后备内容无法传递给子组件标签
具名插槽
在前面，我们提到插槽的两个作用，一个是为组件标签提供预设内容，一个是作为承载组件标签内容的预留空间，刚好是一个互补的作用。在这里，具名插槽的意思就是插槽有名字，它的渲染位置可以通过名字来确定。这个具名插槽的作用发挥的是第二种作用：作为承载组件标签内容的预留空间。比如，组件模板已经比较臃肿了，但我又想在模板里加上一些东西，这时我可以在组件标签里设置了一些内容，希望被渲染到组件模板的具体某个位置，便可以使用具名插槽。实现在组件标签里铺设内容;
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
可以看到这里的组件标签里的东西类似于一个迷你模板，在上面有一个指令：v-slot，指定了该“模板”的渲染在哪个插槽的位置：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
这是 base-layout 的模板，可以在这里实现安插插槽，并给插槽一个名字，组件标签里的迷你模板将会被渲染到指定的插槽所在的位置。没有给定插槽名字的插槽拥有一个默认名字：default。
作用域插槽
这个插槽释放了插槽的强大能力。在前面，我们提到，子组件标签在父组件里渲染，当希望 slot 可以使用子组件的数据设置后备内容时，子组件标签并不能接收到子组件里的 data 等数据。
但作用域插槽突破了这个限制，可在子组件插槽添加属性：v-bind:user="user"
<div class="helloworld">
<slot v-bind:user="user"></slot>
</div>
这样，子组件的数据被传递到一个 slotProps 的对象上，当然，这个名字可以自定义。可以在子组件标签里这么使用：
<HelloWorld>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</HelloWorld>
这样，子组件里的数据便可以子组件标签里使用。同样的，让我们串联起前面具名插槽的知识，这里的 default 指定了插槽的名字，可以更改插槽名字指定使用哪个插槽作为渲染的容器。
但不得不吐槽的是，在子组件里的数据，费尽九牛二虎之力传到子组件标签所在父组件的作用域里，但渲染后这些内容却又是被渲染回子组件里。这样的折腾实在不知有何意义。也不知有何使用场景，暂且可搁置在一旁。
插槽的作用其实十分强大，但目前来说暂时没有驾驭它的能力，对插槽的使用场景尚无经验，可对上述基本功能做下掌握。
动态组件
想象一下以下场景，点击一个 tab 切换不同的页面。这是一个十分常见的需求，可以使用不同的组件承载不同的内容，点击以下切换组件。除了 v-if 的实现方式，还可以使用 is attribute 来切换不同的组件官方案例。
现在，已经可以通过 is attribute 实现组件的切换。但你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
但如果我们希望切换时组件的状态会被保留，就需要用到 keep-alive 元素的强大能力了。
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
这样，组件状态就会被缓存。当你来回切换组件时，你在组件上的操作状态将会被保留，组件不会每次都被刷新，这对于一些无更新的组件来说实现了高效复用。
