插槽

Fri, 04 Oct 2024 00:00:00 +0800

一、插槽的几种使用方式

举例来说，这里有一个 <FancyButton> 组件，可以像这样使用：

<FancyButton>
 Click me! <!-- 插槽内容 -->
</FancyButton>

而 <FancyButton> 的模板是这样的：

<button class="fancy-btn">
 <slot></slot> <!-- 插槽出口 -->
</button>

<slot> 元素是一个 插槽出口 (slot outlet)，标示了父元素提供的 插槽内容 (slot content) 将在哪里被渲染。

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 <BaseLayout> 组件中，有如下模板：

<div class="container">
 <header>
 <!-- 标题内容放这里 -->
 </header>
 <main>
 <!-- 主要内容放这里 -->
 </main>
 <footer>
 <!-- 底部内容放这里 -->
 </footer>
</div>

对于这种场景， <slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：