Vue 插槽（Slots）全解析1

Vue 插槽（Slots）全解析

插槽是 Vue 中组件间内容传递的重要机制，能让父组件灵活地向子组件传递模板片段，同时保持子组件结构和样式的复用性。本文基于组件基础，从基础到进阶全面解析插槽的用法与原理。

一、插槽内容与出口：组件内容的“传递通道”

组件通过 props 接收 JavaScript 数据，但模板内容（如标签、文本、甚至其他组件）的传递需要依赖插槽。插槽的核心是“内容提供者（父组件）”和“内容渲染者（子组件）”的分工：父组件定义要传递的内容，子组件通过“插槽出口”指定内容渲染的位置。

1. 基础示例：简单内容传递

以 <FancyButton> 组件为例：

• 父组件（内容提供者）：在组件标签内直接写入要传递的内容（插槽内容）

   <FancyButton>
     Click me! <!-- 插槽内容：父组件定义的模板片段 -->
   </FancyButton>

• 子组件（内容渲染者）：用 <slot></slot> 标记内容渲染的位置（插槽出口）

   <button class="fancy-btn">
     <slot></slot> <!-- 插槽出口：子组件指定内容渲染的位置 -->
   </button>

最终渲染结果：

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

原理类比：插槽类似“函数传参”——父组件传入“内容参数”，子组件在自己的结构中“调用参数”并渲染。