开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
theme: channing-cyan
1. 插槽
1-1. 什么是插槽
插槽(Slot) 是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。 可以把插槽认为是组件封装器件,为用户预留的内容的占位符。
2. 基础用法
2-1. 体验插槽的基础用法
在封装组件时, 可以通过 元素 定义插槽,从而为用户预留内容占位符。示例代码如下：
<template>
<p>这是 MyCom1 组件的 第 1 个 p 标签 </p>
<!-- 通过 slot 标签, 为用户预留内容占位符(插槽) -->
<slot></slot>
<p>这是 MyCom1 组件最后一个 p 标签</p>
</template>
<my-com-1>
<!-- 在使用 MyCom1 组件时, 为插槽指定具体的内容 -->
<p>!!!用户自定义的内容!!!</p>
</my-com-1>
2-2. 没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何插槽,则用户提供的任何自定义内容都会被丢弃。示例代码如下:
<template>
<p>这是 MyCom1 组件的 第 1 个 p 标签 </p>
<!-- 通过 slot 标签, 为用户预留内容占位符(插槽) -->
<slot></slot>
<p>这是 MyCom1 组件最后一个 p 标签</p>
</template>
<my-com-1>
<!-- 在使用 MyCom1 组件时, 为插槽指定具体的内容 -->
<p>!!!用户自定义的内容!!!</p>
</my-com-1>
2-3. 后备内容
封装组件时,可以为预留的 插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。示例代码如下
<template>
<p>这是 MyCom1 组件的 第 1 个 p 标签 </p>
<slot> 这是后备内容 </slot>
<p>这是 MyCom1 组件最后一个 p 标签</p>
</template>
3. 具名插槽
如果在封装组件时需要预留多个插槽节点,则需要为每个 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做 "具名插槽"。
