第二阶段：Vue 组件化开发（第 21天）

Vue 插槽（slot）：让组件更灵活的"内容分发器"

核心知识点

插槽是 Vue.js 中一种强大的功能，允许父组件向子组件传递内容（如 HTML 元素、文本或其他组件），从而增强组件的灵活性和复用性。以下是核心概念：

插槽的概念：插槽是子组件中预留的"占位符"，父组件可以将自定义内容"注入"到这些位置。这实现了内容分发，使子组件的结构不再固定，而是根据父组件的需求动态变化。
匿名插槽（默认插槽） ：这是最常见的插槽类型。子组件中使用 <slot> 标签定义一个未命名的插槽，父组件传递的内容会自动填充到这个插槽中。例如，子组件模板中可以有 <slot>默认内容</slot>，父组件使用时直接在子组件标签内放置内容即可。
插槽的作用：解决组件内容固定的问题。例如，一个按钮组件可能需要在不同场景下显示不同文本或图标，通过插槽，父组件可以自定义按钮内容，无需修改子组件内部结构。这提高了组件的可复用性，适应各种业务场景。
插槽的默认内容 ：子组件插槽中可以设置默认内容（如 <slot>默认文本</slot>）。当父组件未传递任何内容时，默认内容会显示；如果父组件传递了内容，则默认内容被覆盖。这确保了组件的健壮性。

案例代码

下面是一个简单示例，演示如何在 Vue 中使用匿名插槽和默认内容。我们将定义两个组件：子组件 ChildComponent 包含一个插槽，父组件 ParentComponent 使用子组件并传递不同内容。

子组件定义 (ChildComponent.vue):

vue 复制代码

<template>
  <div class="child">
    <h2>子组件标题</h2>
    <!-- 定义匿名插槽，并设置默认内容 -->
    <slot>默认内容：这是一个默认文本</slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

父组件使用 (ParentComponent.vue):

vue 复制代码

<template>
  <div class="parent">
    <!-- 使用子组件，并传递不同内容 -->
    <ChildComponent>
      <!-- 传递文本内容 -->
      <p>父组件传递的文本内容</p>
    </ChildComponent>

    <ChildComponent>
      <!-- 传递图片 -->
      <img src="https://example.com/image.jpg" alt="示例图片">
    </ChildComponent>

    <ChildComponent>
      <!-- 传递按钮 -->
      <button>点击按钮</button>
    </ChildComponent>

    <!-- 不传递内容，显示默认内容 -->
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

演示说明:

当父组件传递内容（如文本、图片或按钮）时，子组件的插槽会被填充。
当父组件未传递内容（如最后一个 <ChildComponent />），子组件显示默认文本："默认内容：这是一个默认文本"。

总结要点

核心作用：插槽是父组件向子组件分发内容的机制，通过匿名插槽（默认插槽）实现灵活的内容定制。
使用方法 ：在子组件中使用 <slot> 定义插槽，并可设置默认内容；父组件在子组件标签内放置自定义内容。
灵活性与复用性：插槽使组件不再局限于固定结构，能适应不同业务需求（如显示文本、图片或交互元素），提升代码复用和维护性。
实际应用：在开发中，常用于构建通用 UI 组件（如卡片、弹窗、列表项），确保组件可配置且易于扩展。掌握插槽技术是 Vue 组件化开发的关键一步。