scopedSlots

scopedSlots 是 Vue.js 中的一个特殊属性，用于在父组件中向子组件传递可复用的模板。scopedSlots 允许父组件向子组件传递一个函数，该函数接收子组件需要的数据并返回一个渲染函数。子组件可以使用该函数来渲染父组件传递的模板。

scopedSlots 具有以下优点：

1. 可以避免在子组件中重复编写模板，提高代码复用性。
2. 可以将父组件中的数据和逻辑与子组件的模板分离，使代码更加清晰和易于维护。
3. 可以在父组件中动态生成模板，让子组件具有更大的灵活性。

使用 scopedSlots 的基本语法如下：

<template>
  <child-component>
    <template v-slot:default="slotProps">
      <!-- 使用 slotProps 渲染模板 -->
    </template>
  </child-component>
</template>

其中，`v-slot:default` 可以使用简写形式 `#default`，`slotProps` 是一个对象，包含了父组件传递的数据。

在子组件中，可以使用 `$scopedSlots` 对象来访问父组件传递的渲染函数。例如：

<template>
  <div>
    <slot :data="data" />
  </div>
</template>

<script>
export default {
  props: ['data'],
  mounted() {
    const slotFn = this.$scopedSlots.default
    // 使用 slotFn 渲染模板
  }
}
</script>

需要注意的是，父组件在使用 scopedSlots 传递模板时，必须将其放入 `<template>` 标签中。另外，子组件中使用 `$scopedSlots` 访问父组件传递的渲染函数时，必须使用函数调用的形式，例如 `slotFn()`。