Vue实现了一套内容分发的API，将 <slot> 元素作为承载分发内容的出口。

匿名插槽

一个不带name的出口都会带有隐含名字”default“

示例：
组件模板如下
<a v-bind:href="url" class="nav-link">
<slot></slot>
</a>
在父组件中使用如下
<nav-link url="/profile">
Your Profile
</nav-link>

当组件渲染的时候会被替换为Your Profile。插槽内可以包含任何模板代码，包括HTML

如果组件模板的template中没有包含那么该组件在使用时，起始标签和结束标签之间的内容都会被抛弃。

具名插槽

组件的模板如下
<div class="container">
<header>
<slot name="header">``</slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer">``</slot>
</footer>
</div>

在父组件中使用组件
<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>