在 Vue 中，slot（插槽）是一种强大的内容分发机制，用于实现组件的复用和扩展

原创

小焱

发布于 2025-07-28 15:41:45

2780

文章被收录于专栏：前端开发前端开发

在 Vue 中，slot（插槽）是一种强大的内容分发机制，用于实现组件的复用和扩展，让父组件可以向子组件传递任意结构的内容。以下是关于 Vue 插槽的详细介绍和使用示例：

1. 基本插槽（匿名插槽）

子组件（ChildComponent.vue）中定义一个匿名插槽，用于接收父组件传递的内容：

<template>
  <div class="child">
    <h2>子组件标题</h2>
    <!-- 匿名插槽，父组件传递的内容会渲染到这里 -->
    <slot></slot> 
  </div>
</template>

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

<style scoped>
.child {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

父组件中使用该子组件并传递内容：

<template>
  <div class="parent">
    <h1>父组件</h1>
    <ChildComponent>
      <p>这是父组件传递给子组件插槽的内容</p>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
.parent {
  padding: 10px;
}
</style>

此时，父组件里写在 <ChildComponent> 标签内的内容，会替换子组件里 <slot> 标签的位置进行渲染。

2. 具名插槽

当子组件需要多个不同位置的插槽时，就可以使用具名插槽，给每个插槽指定一个名字。子组件（ChildComponent.vue）：

<template>
  <div class="child">
    <h2>子组件标题</h2>
    <!-- 具名插槽：header -->
    <slot name="header"></slot> 
    <div class="content">
      <p>子组件默认内容区域</p>
    </div>
    <!-- 具名插槽：footer -->
    <slot name="footer"></slot> 
  </div>
</template>

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

<style scoped>
.child {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

父组件中使用具名插槽，通过 v-slot: 指令（可简写为 #）指定要填充的插槽名称：

<template>
  <div class="parent">
    <h1>父组件</h1>
    <ChildComponent>
      <template v-slot:header>
        <h3>这是填充到 header 插槽的内容</h3>
      </template>
      <template #footer>
        <p>这是填充到 footer 插槽的内容</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
.parent {
  padding: 10px;
}
</style>

这样，不同名称的插槽内容会对应填充到子组件中相应名字的 <slot> 位置。

3. 作用域插槽

子组件可以向插槽传递数据，父组件在使用插槽时可以接收并使用这些数据，这就是作用域插槽。子组件（ChildComponent.vue）：

<template>
  <div class="child">
    <h2>子组件标题</h2>
    <!-- 向插槽传递数据，这里传递了一个对象，包含 user 数据 -->
    <slot :user="user"></slot> 
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
}
</script>

<style scoped>
.child {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

父组件中使用作用域插槽，接收子组件传递的数据并使用：

<template>
  <div class="parent">
    <h1>父组件</h1>
    <ChildComponent>
      <!-- 使用作用域插槽，通过 v-slot 接收子组件传递的数据，这里用 slotProps 接收（名称可自定义） -->
      <template v-slot:default="slotProps">
        <p>子组件传递的用户姓名：{{ slotProps.user.name }}</p>
        <p>子组件传递的用户年龄：{{ slotProps.user.age }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
.parent {
  padding: 10px;
}
</style>

也可以使用解构赋值的方式简化写法：

<template>
  <div class="parent">
    <h1>父组件</h1>
    <ChildComponent>
      <!-- 解构 slotProps，直接获取 user 数据 -->
      <template v-slot:default="{ user }">
        <p>子组件传递的用户姓名：{{ user.name }}</p>
        <p>子组件传递的用户年龄：{{ user.age }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

作用域插槽常用于子组件有列表等动态数据，父组件需要自定义数据展示样式的场景，比如表格组件中自定义列的渲染等。

Vue 插槽通过这几种形式，很好地实现了组件之间内容的灵活分发和交互，让组件的复用性和扩展性更强。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js

#Vue

登录后参与评论

0 条评论

热度