vue插槽实现方法

Vue 插槽的基本概念

插槽（Slot）是 Vue 组件化开发中的重要功能，允许父组件向子组件传递模板片段，实现内容分发。插槽分为默认插槽、具名插槽和作用域插槽三种类型。

默认插槽的实现

默认插槽是最简单的插槽形式，子组件通过 <slot> 标签定义插槽位置，父组件传递的内容会替换子组件中的 <slot>。

子组件代码示例：

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

父组件代码示例：

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

具名插槽的实现

具名插槽通过 name 属性区分多个插槽，父组件通过 v-slot 指令指定内容分发的目标插槽。

子组件代码示例：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

父组件代码示例：

<template>
  <ChildComponent>
    <template v-slot:header>
      <h3>这是头部内容</h3>
    </template>
    <template v-slot:content>
      <p>这是主体内容</p>
    </template>
  </ChildComponent>
</template>

作用域插槽的实现

作用域插槽允许子组件将数据传递给父组件的插槽内容，父组件通过 v-slot 接收数据并自定义渲染逻辑。

子组件代码示例：

<template>
  <div>
    <slot :item="itemData"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemData: { name: '示例数据', value: 123 }
    };
  }
};
</script>

父组件代码示例：

<template>
  <ChildComponent>
    <template v-slot="slotProps">
      <p>{{ slotProps.item.name }} - {{ slotProps.item.value }}</p>
    </template>
  </ChildComponent>
</template>

动态插槽名的使用

Vue 支持通过动态指令参数绑定插槽名，实现更灵活的插槽分发。

父组件代码示例：

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

插槽的默认内容

子组件可以为插槽定义默认内容，当父组件未传递插槽内容时显示默认值。

子组件代码示例：

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

通过以上方法，可以灵活实现 Vue 组件间的插槽功能，满足不同场景下的内容分发需求。