当前位置：首页 > VUE

vue实现分发

2026-02-10 07:53:21VUE

Vue 实现分发的方法

Vue.js 提供了多种方式来实现内容分发，主要通过插槽（Slots）和作用域插槽（Scoped Slots）来实现组件之间的内容传递和分发。

插槽（Slots）

插槽是 Vue 组件中用于分发内容的占位符，允许父组件向子组件传递模板片段。

基本插槽示例：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <p>分发的内容</p>
  </ChildComponent>
</template>

具名插槽：

具名插槽允许在组件中定义多个插槽，并通过名称指定分发内容的位置。

<!-- 子组件 ChildComponent.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 v-slot:footer>
      <p>底部内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽（Scoped Slots）

作用域插槽允许子组件向父组件传递数据，父组件可以根据这些数据动态渲染内容。

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot :item="item" :index="index"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: { name: 'Vue' },
      index: 0
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>{{ slotProps.item.name }} - {{ slotProps.index }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名

动态插槽名允许通过变量动态指定插槽名称。

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:[dynamicSlotName]>
      <p>动态插槽内容</p>
    </template>
  </ChildComponent>
</template>

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

插槽的简写语法

Vue 2.6+ 支持使用 # 简写 v-slot。

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template #header>
      <h1>头部内容</h1>
    </template>
  </ChildComponent>
</template>

分发的高级用法

插槽的默认内容

可以在子组件中为插槽定义默认内容，当父组件未提供内容时显示。

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

作用域插槽的解构

可以通过解构语法直接从作用域插槽中提取数据。

vue实现分发

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="{ item, index }">
      <p>{{ item.name }} - {{ index }}</p>
    </template>
  </ChildComponent>
</template>