带name属性的为具名插槽，不带name属性的是默认插槽（会带有隐含的名字default）
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
具名内容必须在template元素内定义，通过v-slot绑定，
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here‘s some contact info</p>
</template>
</base-layout>
如果想让插槽内容，能够访问子组件中的数据，需要使用作用域插槽
通过v-bind，把数据作为slot插槽的一个属性绑定，称为插槽 prop
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
<current-user v-slot="{ user }">
{{ user.firstName }}
</current-user>
#号后面必须跟插槽name
<current-user #default="{ user }">
{{ user.firstName }}
</current-user>
原文：https://www.cnblogs.com/liuxiaoru/p/13752793.html