插槽（Slots）详解：全面解析 Vue 插槽的所有用法

最新推荐文章于 2025-06-07 16:21:29 发布

QTX18730

最新推荐文章于 2025-06-07 16:21:29 发布

阅读量1.6k

点赞数 29

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_75075881/article/details/147221527

插槽是 Vue.js 中非常强大且灵活的功能，广泛用于父子组件之间的内容分发。插槽允许父组件向子组件插入内容，让子组件具有更高的可重用性和灵活性。通过插槽机制，父组件能够控制子组件的内容，并可以灵活调整子组件的布局。

插槽的概念

在 Vue 中，插槽就像是一个占位符，子组件通过 <slot></slot> 标签预留出一块位置，父组件通过内容插入的方式来向该位置传递数据或者组件。插槽能让父组件动态地调整子组件的内容，子组件则保持高度的可复用性。

1. 默认插槽

默认插槽是最常用的插槽类型。父组件向子组件传递内容时，子组件通过 <slot></slot> 标签占位，插入的内容将放置在这个位置。

示例：

父组件：

<template>
  <div>
    <child-component>
      <p>This is content passed from parent to child!</p>
    </child-component>
  </div>
</template>

子组件：

<template>
  <div>
    <slot></slot>  <!-- 默认插槽 -->
  </div>
</template>

解释：

在父组件中，<child-component> 包裹了 <p>This is content passed from parent to child!</p>，这是父组件向子组件传递的内容。
子组件通过 <slot></slot> 标签接收并展示父组件传递的内容。

默认插槽的默认内容：

如果父组件没有提供内容，子组件可以在 <slot></slot> 中提供默认内容。

<template>
  <div>
    <slot>Default content if no content is provided</slot>
  </div>
</template>

解释：

如果父组件没有向插槽传递任何内容，子组件会显示默认的内容 "Default content if no content is provided"。

2. 命名插槽

命名插槽允许子组件通过 name 属性区分不同的插槽，以便父组件可以将内容传递到不同的位置。这对于有多个插槽需要显示不同内容的场景非常有用。

示例：

父组件：

<template>
  <div>
    <child-component>
      <template v-slot:header>
        <h1>This is the header content</h1>
      </template>
      <template v-slot:footer>
        <footer>This is the footer content</footer>
      </template>
    </child-component>
  </div>
</template>

子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot> <!-- 显示 header 插槽内容 -->
    </header>
    <footer>
      <slot name="footer"></slot> <!-- 显示 footer 插槽内容 -->
    </footer>
  </div>
</template>

解释：

在父组件中，使用 v-slot:header 和 v-slot:footer 为插槽传递内容，并为每个插槽提供不同的内容。
子组件通过 name="header" 和 name="footer" 来区分这两个插槽，并分别渲染传递过来的内容。

命名插槽的简写语法

Vue 2.6+ 引入了简化的命名插槽语法，使用 # 来代替 v-slot，使代码更简洁。

父组件（简写）：

<template>
  <child-component>
    <template #header>
      <h1>This is the header content</h1>
    </template>
    <template #footer>
      <footer>This is the footer content</footer>
    </template>
  </child-component>
</template>

子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

解释：

父组件使用简写 #header 和 #footer 来传递内容。
子组件仍然通过命名插槽 <slot name="header"></slot> 和 <slot name="footer"></slot> 来显示父组件传递的内容。

3. 具名插槽（带有默认内容）

具名插槽可以为父组件提供多种内容传递的方式。而且可以为具名插槽指定默认内容。当父组件没有传递特定内容时，子组件会显示默认内容。

示例：

父组件：

<template>
  <child-component>
    <template #sidebar>
      <p>This is the sidebar content</p>
    </template>
  </child-component>
</template>

子组件：

<template>
  <div>
    <slot name="sidebar">Default sidebar content</slot>
  </div>
</template>

解释：

父组件向 sidebar 插槽传递内容 This is the sidebar content。
如果父组件没有传递内容，子组件将显示默认内容 Default sidebar content。

4. 作用域插槽（Scoped Slots）

作用域插槽是 Vue 中非常强大的一项特性，它允许子组件向父组件暴露数据，使父组件能够根据子组件传递的数据自定义内容。作用域插槽与普通插槽的不同之处在于，普通插槽只接收内容，而作用域插槽能够让父组件访问子组件的数据。

示例：

父组件：

<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.message }}</p> <!-- 从子组件传递的 message 数据 -->
    </template>
  </child-component>
</template>

子组件：

<template>
  <div>
    <slot :message="message"></slot> <!-- 向插槽传递 message 数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child component!'
    };
  }
};
</script>

解释：

子组件通过 slot :message="message" 向插槽传递 message 数据。
父组件使用 v-slot:default="slotProps" 来接收并访问子组件传递的 message 数据。
父组件可以根据 slotProps.message 的值来自定义显示的内容。

5. 插槽的多层嵌套

有时，子组件会嵌套多个子组件，父组件需要传递内容给多个层级的插槽。在这种情况下，父组件可以将内容传递给子组件的多个插槽层级。

示例：

父组件：

<template>
  <outer-component>
    <template v-slot:header>
      <h1>Outer Header</h1>
    </template>
    <template v-slot:default>
      <inner-component>
        <template v-slot:content>
          <p>This is the content inside the inner component</p>
        </template>
      </inner-component>
    </template>
  </outer-component>
</template>

子组件：

<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>  <!-- 默认插槽 -->
    </main>
  </div>
</template>

解释：