作用域插槽是vue中实现子传父数据的关键机制，子组件通过slot绑定响应式数据，父组件用v-slot解构消费，具名与默认写法分别适用于多插槽和单插槽场景，vue 3仅支持v-slot语法。

作用域插槽是 Vue 中实现「子传父数据」的关键机制之一，它不是靠事件或 props，而是通过插槽绑定数据对象，让父组件在使用插槽时直接解构、消费子组件内部状态。

作用域插槽的核心逻辑

子组件在 <slot></slot> 标签上用属性（如 :user="userInfo"）绑定响应式数据；父组件用 v-slot 接收这个绑定对象，解构出所需字段用于渲染。

• 子组件负责「提供数据」：把要暴露的数据作为插槽属性传出去
• 父组件负责「消费数据」：在 v-slot 的参数中接收并使用，不依赖子组件内部模板
• 数据流单向、声明式：没有副作用，也不需额外事件监听或 ref 操作

具名作用域插槽写法（推荐）

适合多插槽场景，语义清晰、可维护性强。例如子组件定义一个 header 插槽并传用户 ID 和昵称：

子组件（UserCard.vue）：

<script setup><br> const user = { id: 101, name: 'Alice', bio: '前端开发者' }<br> </script>

父组件调用：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

  

默认作用域插槽写法

适用于只有一个主要插槽且需传数据的场景。子组件用 v-bind 或简写 : 绑定整个对象：

子组件（ListItem.vue）：

父组件写法（注意参数名可自定义）：

  

Vue 3 中的语法细节提醒

Vue 3 使用 v-slot（或缩写 #），不再支持旧版 scope 属性（Vue 2 写法已废弃）；参数必须是对象解构形式，不能直接写 v-slot="{ msg }" 而不带插槽名——默认插槽也要显式写 #default 或省略为 v-slot（无参数名时）。

• 正确：<template data>{{ data.text }}</template>
• 错误：<template scope="data">{{ data.text }}</template>（Vue 3 不识别）
• 可选简写：<template>{{ slotProps.data }}</template>

不复杂但容易忽略

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！