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

Question

请阐述在Vue中具名插槽和作用域插槽分别适用于哪些场景，并详细说明它们之间的区别，同时给出简单的代码示例。

Answer 1

具名插槽

1. 适用场景：当一个组件模板内需要预留多个不同位置的可替换内容区域时，具名插槽非常有用。比如一个页面布局组件，可能有头部、主体、底部等不同位置需要外部传入不同内容。
2. 说明：具名插槽通过 name 属性来指定插槽的名称，在父组件使用子组件时，通过 v-slot:插槽名 或 #插槽名 的形式来插入内容到对应的具名插槽位置。

代码示例：

<!-- 子组件template -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 父组件使用子组件 -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>这是头部</h1>
    </template>
    <p>这是主体内容</p>
    <template v-slot:footer>
      <p>这是底部</p>
    </template>
  </ChildComponent>
</template>

作用域插槽

1. 适用场景：当子组件希望将自身的数据暴露给父组件，让父组件根据这些数据来决定如何渲染插槽内容时，作用域插槽就派上用场。比如列表组件，子组件提供列表数据，父组件可以根据数据自定义每一项的显示方式。
2. 说明：在子组件中，通过在 <slot> 标签上绑定数据，父组件在使用 v-slot 时可以接收这些数据，并根据数据进行不同的渲染。

代码示例：

<!-- 子组件template -->
<template>
  <div>
    <slot :item="dataItem" :index="index" v-for="(dataItem, index) in listData" :key="index">
      <!-- 默认插槽内容 -->
      <span>{{ dataItem }}</span>
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listData: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

<!-- 父组件使用子组件 -->
<template>
  <ChildComponent>
    <template v-slot="{ item, index }">
      <li :key="index">{{ index + 1 }}. {{ item }}</li>
    </template>
  </ChildComponent>
</template>

区别

1. 数据流向：
   • 具名插槽：父组件向子组件插槽传入内容，子组件无法控制父组件插入的内容，数据是单向从父到子插槽。
   • 作用域插槽：子组件向父组件暴露数据，父组件根据子组件暴露的数据来渲染插槽内容，数据流向是从子到父组件插槽。
2. 功能侧重点：
   • 具名插槽：主要解决组件内不同位置内容定制的问题。
   • 作用域插槽：侧重于子组件数据的自定义展示，让父组件在使用子组件时能根据子组件提供的数据灵活决定渲染逻辑。