面试题：Vue插槽中具名插槽和匿名插槽的使用场景及区别

Question

请阐述在Vue开发中，具名插槽和匿名插槽通常在哪些场景下使用，它们之间的具体区别是什么，并举例说明如何在组件中正确使用这两种插槽。

Answer 1

具名插槽

1. 使用场景：
   • 当一个组件需要在不同位置插入不同内容时使用。比如一个页面布局组件，可能有页眉、页脚、侧边栏等不同区域，每个区域需要插入不同的内容，就可以使用具名插槽分别对应不同区域。
   • 对于复杂组件，组件内不同功能模块需要插入不同内容时，具名插槽能很好地进行区分和管理。
2. 与匿名插槽的区别：具名插槽有明确的名字，通过名字来区分不同的插槽位置，便于精准插入内容；而匿名插槽没有名字，只要往组件标签内写内容就会插入到匿名插槽位置。
3. 使用示例：
   • 父组件：

<template>
  <div>
    <MyComponent>
      <template v-slot:header>
        <h1>这是页眉内容</h1>
      </template>
      <template v-slot:footer>
        <p>这是页脚内容</p>
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

• 子组件（MyComponent.vue）：

<template>
  <div>
    <slot name="header"></slot>
    <main>这里是组件主体内容</main>
    <slot name="footer"></slot>
  </div>
</template>

匿名插槽

1. 使用场景：
   • 当组件内只有一个地方需要插入自定义内容时使用。比如一个简单的卡片组件，卡片内部只需要展示一段自定义文本，这时匿名插槽就足够了。
   • 适用于组件的内容插入需求比较单一，不需要区分不同位置的场景。
2. 与具名插槽的区别：匿名插槽没有名字，在父组件中直接在组件标签内写内容即可插入到组件对应的匿名插槽位置；具名插槽则需通过 v - slot:插槽名 的方式精准插入。
3. 使用示例：
   • 父组件：

<template>
  <div>
    <SimpleCard>
      <p>这是插入到卡片的自定义文本</p>
    </SimpleCard>
  </div>
</template>

<script>
import SimpleCard from './SimpleCard.vue';
export default {
  components: {
    SimpleCard
  }
};
</script>

• 子组件（SimpleCard.vue）：

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>