五、Vue 插槽（Slots）实战指南：构建灵活可复用组件

1. 插槽的核心概念

插槽是 Vue 组件化开发的核心机制，允许父组件向子组件传递内容，实现内容分发与模板定制。通过 <slot> 标签，子组件可定义占位符，父组件通过 v-slot 指令填充内容。

2. 默认插槽：基础内容分发

2.1 基础用法

<!-- 子组件：Button.vue -->
<template>
  <button class="btn">
    <slot>默认文本</slot>
  </button>
</template>

<!-- 父组件使用 -->
<Button>提交</Button> <!-- 自定义内容 -->
<Button></Button>     <!-- 显示默认文本 -->

2.2 特性说明

特性	说明	应用场景
无名称	自动匹配父组件未指定的内容	简单组件扩展
支持 HTML	可传递任意标签或组件	按钮文案、提示信息

3. 具名插槽：多区域内容分发

3.1 基础实现

<!-- 子组件：Layout.vue -->
<template>
  <div class="container">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

<!-- 父组件 -->
<Layout>
  <template v-slot:header>
    <h1>页面标题</h1>
  </template>
  <p>主体内容</p>
  <template v-slot:footer>
    <small>版权所有 © 2024</small>
  </template>
</Layout>

3.2 语法糖与简写

<!-- 简写方式 -->
<Layout>
  <template #header>
    <h1>页面标题</h1>
  </template>
  <!-- 其他内容 -->
</Layout>

4. 作用域插槽：数据驱动内容定制

4.1 基础用法

<!-- 子组件：TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <slot :todo="todo">{{ todo.text }}</slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '任务1', done: false },
        { id: 2, text: '任务2', done: true }
      ]
    };
  }
};
</script>

<!-- 父组件 -->
<TodoList v-slot="{ todo }">
  <span :class="{ done: todo.done }">
    {{ todo.text }}
  </span>
</TodoList>

4.2 解构语法

<TodoList v-slot="{ todo, index }">
  <div>{{ index + 1 }}. {{ todo.text }}</div>
</TodoList>

5. 高级用法与最佳实践

5.1 动态插槽名

<template>
  <MyComponent>
    <template v-slot:[slotName]>
      动态插槽内容
    </template>
  </MyComponent>
</template>

<script>
export default {
  data() { return { slotName: 'header' } }
};
</script>

5.2 作用域插槽默认值

<slot name="footer" :user="user">
  {{ user.name || '匿名用户' }}
</slot>

5.3 混合使用场景

<template>
  <BaseTable>
    <!-- 具名插槽 + 作用域插槽 -->
    <template #header="{ title }">
      <h2>{{ title }}</h2>
    </template>
    
    <!-- 默认插槽 -->
    <template v-slot="{ items }">
      <ul>
        <li v-for="item in items">{{ item }}</li>
      </ul>
    </template>
  </BaseTable>
</template>

6. 插槽类型对比与选择策略

类型	适用场景	数据传递方式
默认插槽	单区域内容扩展	无
具名插槽	多区域内容分发	无
作用域插槽	子组件向父组件暴露数据	通过 slot-scope 传递

选择建议：

• 简单内容扩展 → 默认插槽
• 多区域布局 → 具名插槽
• 数据驱动定制 → 作用域插槽

7. 总结

Vue 插槽通过内容分发与数据传递，实现了组件的高度灵活性和复用性：

• 默认插槽：基础内容扩展
• 具名插槽：多区域布局控制
• 作用域插槽：数据驱动的模板定制

本文由 [码说数字化] 原创，转载请注明出处。