作用域插槽
// 封装
<template>
<div>
<slot name="header" :message="message"></slot>
<slot></slot>
</div>
</template>
// 使用
<template>
<div>
<my-component>
<template v-slot:header="{ message }">
<h1>{{ message }}</h1>
</template>
<p>This is the default content</p>
</my-component>
</div>
</template>
具名插槽
// 封装
<template>
<div>
<header>
<slot name="header">Default header</slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer">Default footer</slot>
</footer>
</div>
</template>
// 使用
<my-component>
<template #header>
<h1>Page header</h1>
</template>
<p>This is the main content.</p>
<template #footer>
<p>Page footer</p>
</template>
</my-component>
默认插槽
// 封装
<template>
<div>
<slot></slot>
</div>
</template>
// 使用
<template>
<div>
<my-component>
<p>This content will be passed to the default slot</p>
</my-component>
</div>
</template>