Vue学习：18.Vue插槽

Vue 中的插槽（slot）是一种灵活的机制，用于在父组件中将内容传递到子组件的特定位置。它允许我们在子组件中定义可以在父组件中传递任意内容的“插槽”，从而实现更灵活的组件化。

在Vue中，插槽主要有以下几种类型：

1. 默认插槽（Default Slot）： 这是最基础的插槽类型。在子组件模板中使用 <slot> 标签作为占位符，父组件则可以在使用该子组件时，在其标签内插入任何想要展示的内容。例如：

   子组件（ChildComponent.vue）：

<template>
  <div>
    <h2>这里是子组件标题</h2>
    <slot></slot> <!-- 默认插槽位置 -->
  </div>
</template>

父组件（ParentComponent.vue）：

<template>
  <child-component>
    <p>这是来自父组件的内容，将显示在子组件的默认插槽位置。</p>
  </child-component>
</template>

        2. 具名插槽（Named Slots）： 当子组件需要多个插槽时，可以为每个插槽指定一个名称，以便父组件更精确地控制内容的分布。在子组件中使用 <slot name="slotName"> 定义具名插槽，父组件则使用 v-slot:slotName（或简写为 #slotName 从 Vue 2.6 开始）将内容分配到相应的插槽。例如：

子组件（ChildComponent.vue）：

<template>
  <div>
    <h2>这里是子组件标题</h2>
    <slot name="header"></slot>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

父组件（ParentComponent.vue）：

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

    <p>这是主内容区域，将显示在子组件的默认插槽。</p>

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

当子组件需要向插槽内容传递数据时，可以使用作用域插槽（Scoped Slots）。子组件通过 <slot> 元素的 v-bind 向父组件传递数据，父组件则在 v-slot 内部创建一个函数来接收这些数据，并根据这些数据渲染插槽内容。在 Vue 3 中，作用域插槽已被更强大的“插槽props”所替代。

        Vue 2 中的作用域插槽示例：

子组件（ChildComponent.vue）：

<template>
  <ul>
    <li v-for="item in items">
      <slot :item="item"> <!-- 传递 item 数据给作用域插槽 -->
        {{ item.text }} <!-- 默认内容，当父组件未提供插槽内容时使用 -->
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [{ text: 'Item 1' }, { text: 'Item 2' }]
    }
  }
}
</script>

父组件（ParentComponent.vue）：

父组件中通过【v-slot:item=' '】接收来自子组件的数据，可简写为：【#item=' '】

<template>
  <child-component>
    <template v-slot:item="slotProps">
      <strong>{{ slotProps.item.text }}</strong> <!-- 使用传递过来的数据 -->
    </template>
  </child-component>
</template>

总结来说，Vue中的插槽机制极大地增强了组件的灵活性与可定制性，使得父组件能够以声明式的方式控制子组件内部的内容布局，同时支持数据的传递，使得父子组件间能更有效地协同工作。