面试题：Vue具名插槽与作用域插槽的区别及应用场景

Question

详细阐述具名插槽和作用域插槽在Vue中的原理、使用方式以及它们各自适用于哪些不同的业务场景，同时给出具体代码示例进行说明。

Answer 1

具名插槽

1. 原理：
   • Vue 组件中的具名插槽是一种将内容分发到组件特定位置的机制。通过在子组件模板中使用 <slot> 元素，并为其设置 name 属性来定义具名插槽。父组件在使用子组件时，可以通过 <template v-slot:插槽名>（Vue 2.6.0+语法，之前是 <template slot="插槽名">）将内容插入到对应的具名插槽位置。
2. 使用方式：
   • 子组件：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

• 父组件：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>这是头部</h1>
    </template>
    <p>这是中间内容</p>
    <template v-slot:footer>
      <p>这是底部</p>
    </template>
  </MyComponent>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

3. 适用场景：
   • 适用于组件有多个固定位置需要插入不同内容的场景，比如页面布局组件，有头部、主体、底部等固定区域，每个区域的内容由父组件来动态决定。

作用域插槽

1. 原理：
   • 作用域插槽允许子组件向父组件暴露数据，父组件可以在插槽内容中使用这些子组件提供的数据。子组件通过在 <slot> 元素上绑定属性来传递数据，父组件在 v-slot 指令后使用解构语法来接收这些数据。
2. 使用方式：
   • 子组件：

<template>
  <div>
    <slot :user="user">
      <p>默认内容：{{user.name}}</p>
    </slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    };
  }
};
</script>

• 父组件：

<template>
  <MyComponent>
    <template v-slot:default="{user}">
      <p>姓名：{{user.name}}，年龄：{{user.age}}</p>
    </template>
  </MyComponent>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
};
</script>

3. 适用场景：
   • 适用于子组件有部分内容需要根据父组件传入的数据动态渲染，但又不想完全由父组件控制子组件数据逻辑的场景。比如列表组件，子组件负责列表的基本结构和数据获取，父组件可以根据子组件提供的数据定制列表项的展示方式。