Vue作用域插槽

news2025/6/9 11:14:38

下面，我们来系统的梳理关于 **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>