Vue 中如何使用插槽和命名插槽实现内容分发？

在Vue.js中，插槽（slot）是一个非常强大的功能，用于实现组件内容的分发。它允许我们将组件的一部分内容在父组件中进行定义，然后传递到子组件的指定位置。这在创建可复用和灵活的组件库时非常有用。

基本插槽的使用：

假设我们有一个基本的 Card组件，我们希望在不同的地方使用不同的内容，但保持相同的样式和结构。我们可以这样定义 Card组件：

vue
<template>
  <div class="card">
    <div class="card-body">
      <slot></slot> <!-- 默认插槽 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

在父组件中，我们可以这样使用 Card组件，并传递内容：

vue
<template>
  <Card>
    <p>这是一些卡片内容</p>
  </Card>
</template>

这里，<p>这是一些卡片内容</p>会被插入到 Card组件中的 <slot></slot>位置。

命名插槽的使用：

如果我们的组件结构更复杂，需要多个插槽，我们可以使用命名插槽。继续使用上面的 Card组件，我们做一些修改以包含多个插槽：

vue
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot> <!-- 命名插槽 "header" -->
    </div>
    <div class="card-body">
      <slot name="body"></slot> <!-- 命名插槽 "body" -->
    </div>
    <div class="card-footer">
      <slot name="footer"></slot> <!-- 命名插槽 "footer" -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

在父组件中，我们可以指定哪部分内容应该进入哪个插槽：

vue
<template>
  <Card>
    <template v-slot:header>
      <h1>标题</h1>
    </template>
    <template v-slot:body>
      <p>这是正文内容。</p>
    </template>
    <template v-slot:footer>
      <span>版权信息</span>
    </template>
  </Card>
</template>

在这个例子中，<h1>标题</h1>，<p>这是正文内容。</p>和 <span>版权信息</span>会被插入到 Card组件相应的命名插槽中。

通过使用默认和命名插槽，我们可以创建出非常灵活和可重用的Vue组件，使得开发更加模块化和高效。