vue slot插槽--- highlight: a11y-dark --- 子组件中定义插槽位置： ```js ```

在 Vue 中，插槽 (Slot) 是一种组件间内容分发的机制，允许父组件向子组件传递模板片段，从而增强组件的灵活性和复用性。

一、插槽的核心作用

内容占位：在子组件中定义“可替换区域”，父组件填充内容。
复用性：组件可以定义通用结构，细节由父组件定制。
数据传递：子组件可向插槽传递数据（作用域插槽）。

二、Vue2 中的插槽（vue3也一样）

1. 默认插槽

子组件：使用 <slot> 标签定义插槽位置，可设置默认内容。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot>默认内容（父组件不传内容时显示）</slot>
  </div>
</template>

父组件：直接在子组件标签内部编写内容。

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

2. 具名插槽

子组件：通过 name 属性命名插槽。

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

父组件：使用 slot 属性指定插槽名。

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

3. 作用域插槽

子组件：通过 <slot> 绑定数据，向父组件传递。

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :item="itemData"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return { itemData: { name: "Vue2" } };
  },
};
</script>

父组件：使用 slot-scope 接收数据。

<ChildComponent>
  <template v-slot:default="data">
    <div>实际渲染 数据{{ data.item.name }}</div>
  </template>
  <!-- 或者可以简化如下 -->
  <template #default="{ item }">
    <p>{{ item.name }}</p> <!-- 输出: Vue2 -->
  </template>
</ChildComponent>

三、最佳实践场景

布局组件：通过插槽定义头部、主体、底部。
列表渲染：父组件自定义列表项的渲染方式。
高阶组件 (HOC)：封装通用逻辑，内容由插槽定制。

通过合理使用插槽，可以显著提升组件的灵活性和复用性。

vue slot插槽