Vue.js 中的插槽（Slots）机制

Vue.js 中的插槽（Slots）机制允许父组件向子组件插入内容，从而实现更为灵活的组件间内容分发。插槽分为匿名插槽、具名插槽和作用域插槽。以下是每种插槽的具体用法：

匿名插槽

匿名插槽是最简单的插槽形式，它没有指定名称，默认情况下，父组件的内容会直接插入到子组件的插槽位置。

示例代码

子组件：

html
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>

父组件：

html
<ChildComponent>
  <!-- 插入的内容 -->
  <p>这是父组件的内容。</p>
</ChildComponent>

如果父组件没有提供内容，则会显示默认内容（即<slot>标签内的内容）。

具名插槽

具名插槽允许在一个组件内部定义多个插槽，并允许父组件有选择性地填充这些插槽。

示例代码

子组件：

html
<template>
  <div>
    <slot name="header">默认头部内容</slot>
    <slot name="content">默认内容</slot>
    <slot name="footer">默认尾部内容</slot>
  </div>
</template>

父组件：

html
<ChildComponent>
  <template v-slot:header>
    <p>这是头部内容。</p>
  </template>
  <template v-slot:content>
    <p>这是内容部分。</p>
  </template>
  <template v-slot:footer>
    <p>这是尾部内容。</p>
  </template>
</ChildComponent>

也可以使用简写：

html
<ChildComponent>
  <template #header>
    <p>这是头部内容。</p>
  </template>
  <template #content>
    <p>这是内容部分。</p>
  </template>
  <template #footer>
    <p>这是尾部内容。</p>
  </template>
</ChildComponent>

作用域插槽

作用域插槽允许子组件向父组件暴露插槽的上下文（通常是数据），使得父组件可以根据这些数据来决定如何填充插槽。

示例代码

子组件：

html
<template>
  <div>
    <slot :user="user">默认内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25
      }
    };
  }
};
</script>

父组件：

html
<ChildComponent>
  <template v-slot:user="{ user }">
    <p>{{ user.name }}，年龄 {{ user.age }}</p>
  </template>
</ChildComponent>

也可以使用简写：

html
<ChildComponent>
  <template #user="{ user }">
    <p>{{ user.name }}，年龄 {{ user.age }}</p>
  </template>
</ChildComponent>

总结

• 匿名插槽：最基础的插槽形式，没有指定名称，适用于只有一个插槽的场景。
• 具名插槽：允许多个插槽共存，并允许父组件有选择性地填充这些插槽。
• 作用域插槽：允许子组件向父组件暴露数据，使得父组件可以根据这些数据来动态填充插槽。

通过使用插槽，Vue.js 提供了一种强大的机制来增强组件间的复用性和灵活性。