Vue3+Element-Plus中#default="scope"及scope的作用解析求助

1. #default="scope"的本质 #

#default是Vue3对默认插槽的简写语法（等价于<slot name="default">），而="scope"是用来接收子组件通过插槽传递出来的作用域数据。这里的scope只是一个自定义变量名，你可以换成rowData、item等任意名称，它代表的是子组件抛给父组件的一组数据集合。

2. 作用域插槽：父组件获取子组件数据的桥梁 #

你已经了解插槽的基本概念，而作用域插槽就是在基础插槽的基础上，让子组件能把内部数据传递给父组件，让父组件可以在插槽内容里使用这些子组件数据。

比如Element-Plus的Table组件，它的每一行都会通过默认插槽把当前行的row数据、index索引等抛出来，父组件通过#default="scope"接收后，就能用scope.row拿到当前行的所有数据，从而自定义渲染单元格内容——这就是你看到表格里用scope.row的原因。

3. scope（作用域数据）并非仅适用于表格 #

完全不是！作用域插槽是Vue的核心特性之一，任何自定义组件都可以实现作用域插槽，表格只是最常见的使用场景。举个简单的自定义组件例子：

子组件（自定义卡片） #

<template>
  <div class="custom-card">
    <!-- 通过slot绑定内部数据，抛给父组件 -->
    <slot :cardTitle="title" :cardDesc="desc"></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const title = ref('Vue学习笔记')
const desc = ref('作用域插槽的核心是子向父传数据')
</script>

父组件使用 #

<template>
  <CustomCard>
    <!-- 接收子组件抛出的数据，自定义渲染 -->
    <template #default="{ cardTitle, cardDesc }">
      <h3>{{ cardTitle }}</h3>
      <p>{{ cardDesc }}</p>
    </template>
  </CustomCard>
</template>

这里的{ cardTitle, cardDesc }就是解构了子组件传递的作用域数据，和表格里的scope是同一个逻辑，只是变量名更语义化。

4. 参考文档推荐 #

• Vue3官方文档的作用域插槽章节，详细讲解了插槽作用域的语法和使用场景
• Element-Plus官方文档中，每个涉及插槽的组件（如Table、Form、Card等）的API部分，都会明确标注该组件插槽传递的作用域数据字段

内容的提问来源于stack exchange，提问作者koji