Vue 中什么是作用域插槽 (Scoped Slots)？

推荐答案

作用域插槽（Scoped Slots）是 Vue 中一种特殊的插槽机制，它允许父组件向子组件传递内容，并且子组件可以将数据通过插槽作用域传递给父组件。通过作用域插槽，父组件可以访问子组件中的数据，并根据这些数据动态渲染内容。

作用域插槽的核心在于 slot-scope 属性（在 Vue 2.6.0+ 中可以使用 v-slot 指令），它允许父组件在插槽内容中访问子组件传递的数据。

本题详细解读

1. 基本用法

在子组件中，可以通过 <slot> 标签定义一个插槽，并通过 v-bind 将数据传递给父组件。父组件可以通过 slot-scope 或 v-slot 来接收这些数据。

子组件示例：

// www.javascriptcn.com code example
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

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

父组件示例：

// www.javascriptcn.com code example
<template>
  <child-component>
    <template slot-scope="{ user }">
      <p>{{ user.name }}</p>
      <p>{{ user.age }}</p>
    </template>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

2. v-slot 语法

在 Vue 2.6.0+ 中，推荐使用 v-slot 指令来替代 slot-scope，语法更加简洁。

父组件示例：

<template>
  <child-component>
    <template v-slot="{ user }">
      <p>{{ user.name }}</p>
      <p>{{ user.age }}</p>
    </template>
  </child-component>
</template>

3. 具名作用域插槽

作用域插槽也可以与具名插槽结合使用，允许在多个插槽中传递不同的数据。

子组件示例：

// www.javascriptcn.com code example
<template>
  <div>
    <slot name="header" :headerData="headerData"></slot>
    <slot name="footer" :footerData="footerData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerData: {
        title: 'Header Title'
      },
      footerData: {
        text: 'Footer Text'
      }
    };
  }
};
</script>

父组件示例：

// www.javascriptcn.com code example
<template>
  <child-component>
    <template v-slot:header="{ headerData }">
      <h1>{{ headerData.title }}</h1>
    </template>
    <template v-slot:footer="{ footerData }">
      <p>{{ footerData.text }}</p>
    </template>
  </child-component>
</template>

4. 作用域插槽的应用场景

作用域插槽常用于以下场景：

• 自定义渲染逻辑：父组件可以根据子组件传递的数据自定义渲染内容。
• 复用组件逻辑：通过作用域插槽，子组件可以封装逻辑，而父组件可以灵活地控制内容的渲染方式。
• 复杂组件设计：在需要将数据从子组件传递到父组件时，作用域插槽提供了一种简洁的方式。

通过作用域插槽，Vue 实现了更灵活的组件通信方式，使得组件之间的数据传递更加直观和高效。