Vue作用域插槽

下面，我们来系统的梳理关于 **Vue 作用域插槽 ** 的基本知识点：

---

一、作用域插槽核心概念

1.1 什么是作用域插槽？

作用域插槽是 Vue 中一种反向数据流机制，允许子组件将数据传递给父组件中的插槽内容。这种模式解决了传统插槽中父组件无法访问子组件内部状态的限制。

1.2 作用域插槽的价值

• 渲染委托：子组件提供数据，父组件控制渲染
• 逻辑与UI分离：子组件处理数据逻辑，父组件控制UI展示
• 高度复用性：相同数据可适配不同UI展示
• 组件解耦：降低父子组件间的直接依赖

1.3 基础示例

<!-- 子组件 DataList.vue -->
<template><ul><li v-for="item in items" :key="item.id"><!-- 向父组件暴露 item 数据 --><slot :item="item" :index="index"></slot></li></ul>
</template><!-- 父组件使用 -->
<DataList :items="products"><template #default="{ item, index }">{{ index + 1 }}. {{ item.name }} - ${{ item.price }}</template>
</DataList>

二、作用域插槽语法演进

2.1 Vue 2 语法

<!-- 具名作用域插槽 -->
<template slot="item" slot-scope="{ item }"><div>{{ item.name }}</div>
</template><!-- 默认作用域插槽 -->
<template slot-scope="props">{{ props.item.name }}
</template>

2.2 Vue 3 语法（推荐）

<!-- 具名作用域插槽 -->
<template #item="{ item }"><div>{{ item.name }}</div>
</template><!-- 默认作用域插槽 -->
<template #default="{ item }">{{ item.name }}
</template><!-- 解构重命名 -->
<template #header="{ title: pageTitle }"><h1>{{ pageTitle }}</h1>
</template>

2.3 组合式 API 中的使用

<script setup>
// 子组件
defineProps(['items'])
</script><template><div v-for="(item, index) in items" :key="item.id"><slot :item="item" :index="index" /></div>
</template>

三、作用域插槽核心技术

3.1 数据传递机制