面试题：什么是 Vue 中的 slot？它有什么作用？

什么是 Vue 中的 slot？

在 Vue 中，slot 是一种用于内容分发的机制，允许你在组件模板中定义占位符，父组件可以向这些占位符插入内容。简单来说，slot 让你能够在子组件中预留位置，父组件可以填充这些位置。

slot 的作用

内容分发：slot 的主要作用是实现内容分发。父组件可以将内容插入子组件的指定位置，使得子组件更加灵活和可复用。
组件复用：通过 slot，你可以创建通用的组件，这些组件可以在不同的上下文中使用，只需通过 slot 插入不同的内容。
默认内容：你可以在 slot 中定义默认内容。如果父组件没有提供内容，子组件将显示默认内容。
具名插槽：Vue 支持具名插槽（Named Slots），允许你在子组件中定义多个插槽，父组件可以根据名称将内容插入不同的插槽。
作用域插槽：Vue 还支持作用域插槽（Scoped Slots），允许子组件向父组件暴露数据，父组件可以根据这些数据动态渲染内容。

示例

默认插槽

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

<!-- 父组件 -->
<template>
  <MyComponent>
    <p>这是插入的内容</p>
  </MyComponent>
</template>

在这个例子中，如果父组件没有提供内容，子组件将显示“默认内容”。如果父组件提供了内容（如 <p>这是插入的内容</p>），子组件将显示父组件提供的内容。

具名插槽

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <header>
      <slot name="header">默认头部</slot>
    </header>
    <main>
      <slot>默认内容</slot>
    </main>
    <footer>
      <slot name="footer">默认尾部</slot>
    </footer>
  </div>
</template>

<!-- 父组件 -->
<template>
  <MyComponent>
    <template v-slot:header>
      <h1>自定义头部</h1>
    </template>
    <p>这是插入的内容</p>
    <template v-slot:footer>
      <p>自定义尾部</p>
    </template>
  </MyComponent>
</template>

在这个例子中，父组件通过 v-slot 指令将内容插入到子组件的具名插槽中。

作用域插槽

<!-- 子组件 MyComponent.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    };
  }
};
</script>

<!-- 父组件 -->
<template>
  <MyComponent v-slot="{ user }">
    <p>{{ user.name }} - {{ user.age }}</p>
  </MyComponent>
</template>

在这个例子中，子组件通过 slot 向父组件暴露了 user 数据，父组件可以根据这些数据动态渲染内容。