el-collapse 插槽

### Element UI Collapse 插槽用法详解

Element UI 的 `el-collapse` 组件提供了丰富的自定义选项，通过插槽（slot），开发者能够灵活地控制折叠面板的内容展示方式。下面是一个具体的例子来说明如何使用这些插槽：

#### 基础结构

<template>
  <div id="app">
    <el-collapse v-model="activeNames" @change="handleChange">
      <!-- 使用具名插槽 title 定制标题 -->
      <el-collapse-item name="1">
        <template slot="title">一致性 Consistency<i class="header-icon el-icon-info"></i></template>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致</div>
      </el-collapse-item>

      <!-- 默认插槽用于设置主体内容 -->
      <el-collapse-item title="反馈 Feedback" name="2">
        <p>操作反馈及时：通过界面样式和交互动效让用户可以清晰感知。</p>
      </el-collapse-item>

      <!-- 可以为多个项提供相同的匿名默认插槽 -->
      <el-collapse-item title="效率 Efficiency" name="3">
        <p>简化页面元素：删除冗余的组件，使用户专注于核心任务。</p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

此示例展示了两种类型的插槽应用方法：
- **具名插槽 (`named slots`)**
- 如上述代码中的 `<template slot="title">...</template>` 部分所示，在这里可以通过指定 `slot="title"` 来覆盖默认的标题渲染行为[^1]。

- **默认插槽 (default slots)**
- 对于每个 `el-collapse-item` 中未特别命名的部分，默认会被视为该条目的主要内容区域。这允许直接放置 HTML 或其他 Vue 组件作为子节点。

此外，还可以利用作用域插槽传递数据给父级组件以便更复杂的交互设计，但这超出了当前讨论范围。