当前位置：首页 > VUE

vue实现slot

2026-01-13 00:44:26VUE

Vue 插槽（Slot）的实现方法

插槽（Slot）是 Vue 中用于组件内容分发的机制，允许父组件向子组件传递模板片段。以下是 Vue 中实现插槽的几种常见方式：

默认插槽

子组件中定义 <slot> 标签作为内容占位符，父组件传入的内容会替换这个占位符。

子组件示例：

<template>
  <div>
    <h2>子组件标题</h2>
    <slot></slot>
  </div>
</template>

父组件使用：

<template>
  <child-component>
    <p>这是插入到子组件中的内容</p>
  </child-component>
</template>

具名插槽

当需要多个插槽时，可以使用具名插槽。子组件中通过 name 属性为插槽命名，父组件通过 v-slot 指令指定内容插入到哪个插槽。

子组件示例：

vue实现slot

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

父组件使用：

<template>
  <child-component>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>

    <p>这是默认插槽内容</p>

    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </child-component>
</template>

作用域插槽

当需要让插槽内容访问子组件中的数据时，可以使用作用域插槽。子组件通过 <slot> 标签的属性传递数据，父组件通过 v-slot 接收这些数据。

子组件示例：

vue实现slot

<template>
  <div>
    <slot :user="user" :age="age"></slot>
  </div>
</template>

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

父组件使用：

<template>
  <child-component>
    <template v-slot:default="slotProps">
      <p>用户: {{ slotProps.user }}</p>
      <p>年龄: {{ slotProps.age }}</p>
    </template>
  </child-component>
</template>

缩写语法

Vue 提供了一些插槽语法的缩写形式：

v-slot:header 可以缩写为 #header
默认插槽可以使用 v-slot 不带参数

示例：

<template>
  <child-component>
    <template #header>
      <h1>缩写头部</h1>
    </template>

    <template v-slot>
      <p>默认插槽缩写</p>
    </template>
  </child-component>
</template>

动态插槽名

可以使用动态指令参数来指定动态插槽名：

<template>
  <child-component>
    <template v-slot:[dynamicSlotName]>
      <p>动态插槽内容</p>
    </template>
  </child-component>
</template>

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

通过以上几种方式，可以灵活地在 Vue 组件中使用插槽来实现内容分发和组件组合。