当前位置：首页 > VUE

vue插槽实现功能

2026-02-20 12:22:32VUE

Vue 插槽的基本概念

Vue 插槽（Slot）是一种内容分发机制，允许父组件向子组件传递模板片段，实现更灵活的组件复用。插槽分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽

子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换该标签。若子组件未提供插槽，父组件的内容会被丢弃。

子组件示例

<template>
  <div>
    <slot>默认内容（当父组件未传递时显示）</slot>
  </div>
</template>

父组件示例

<template>
  <ChildComponent>
    <p>这是父组件传递的内容</p>
  </ChildComponent>
</template>

具名插槽

通过 name 属性为插槽命名，实现多内容分发。父组件使用 v-slot 指令或 # 缩写指定插槽名。

vue插槽实现功能

子组件示例

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

父组件示例

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>标题内容</h1>
    </template>
    <p>默认插槽内容</p>
    <template #footer>
      <p>页脚内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

子组件通过插槽属性向父组件传递数据，父组件通过 v-slot 接收数据并自定义渲染逻辑。

vue插槽实现功能

子组件示例

<template>
  <div>
    <slot :item="itemData" :index="currentIndex"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemData: { name: "示例" },
      currentIndex: 0
    };
  }
};
</script>

父组件示例

<template>
  <ChildComponent>
    <template v-slot="slotProps">
      <p>{{ slotProps.item.name }} - 索引: {{ slotProps.index }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

通过动态指令参数绑定插槽名，实现灵活的内容分发。

父组件示例

<template>
  <ChildComponent>
    <template #[dynamicSlotName]>
      <p>动态插槽内容</p>
    </template>
  </ChildComponent>
</template>
<script>
export default {
  data() {
    return { dynamicSlotName: "header" };
  }
};
</script>