当前位置：首页 > VUE

vue插槽实现方法

2026-02-20 06:51:11VUE

vue插槽的基本概念

插槽（Slot）是Vue.js中用于内容分发的机制，允许父组件向子组件传递模板片段，增强组件的灵活性和复用性。

默认插槽

子组件通过<slot>标签定义插槽位置，父组件传递的内容会替换子组件的<slot>标签。若父组件未提供内容，则显示<slot>内的默认内容。

子组件代码示例：

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

父组件使用示例：

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

具名插槽

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

vue插槽实现方法

子组件代码示例：

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

父组件使用示例：

<template>
  <ChildComponent>
    <template #header>
      <h1>头部内容</h1>
    </template>
    <p>默认插槽内容</p>
    <template v-slot:footer>
      <p>底部内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

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

vue插槽实现方法

子组件代码示例：

<template>
  <div>
    <slot :user="userData" :age="userAge"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userData: "张三",
      userAge: 25
    };
  }
};
</script>

父组件使用示例：

<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>姓名：{{ slotProps.user }}, 年龄：{{ slotProps.age }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

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

父组件示例：

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