vue插槽传参的核心是作用域插槽，子组件通过暴露数据，父组件用v-slot="{ prop }"解构接收，默认插槽和具名插槽均支持，vue 3 setup中slots为函数需手动调用。

Vue 插槽传参的核心是作用域插槽——它让子组件能把自己的数据“暴露”给父组件，再由父组件在插槽内容里使用。这不是把参数“塞进去”，而是子组件把数据作为插槽的“属性”提供出来，父组件用 v-slot 解构接收。

默认插槽也能传参？可以，但得靠作用域

很多人以为默认插槽只能放静态内容，其实只要子组件在 <slot></slot> 上绑定属性，它就自动升级为作用域插槽：

• 子组件中这样写：<slot :user="userInfo" :loading="isLoading"></slot>
• 父组件用 v-slot 接收：<childcomponent v-slot="{ user, loading }">{{ user.name }} 加载中：{{ loading }}</childcomponent>
• 注意：即使没起名字，也要用 v-slot（或简写 #default），不能直接写在标签内

具名插槽传参：按位置+带数据，一目了然

当子组件有多个插槽出口（比如 header、main、footer），你可以分别传不同数据：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 子组件定义：<slot name="header" :title="pageTitle"></slot> 和 <slot name="main" :items="listData"></slot>
• 父组件对应接收：<template title>{{ title }}</template> 和 <template items><div v-for="i in items" :key="i.id">{{ i.label }}</div></template>
• 名字必须完全一致（header / main），大小写和拼写都不能错

Vue 3 中的 setup 里怎么用？slots 是个函数

如果你在 setup() 中操作插槽，context.slots 不是对象，而是函数集合：

• context.slots.default?.() 可以手动渲染默认插槽内容
• context.slots.header?.({ title: '首页' }) 表示向具名插槽传入参数
• 实际开发中更常用的是在模板里用 v-slot，setup 中调用 slots 主要用于高级封装（如渲染函数）

常见误区提醒

新手容易卡在这几个地方：

• 想在插槽里直接访问子组件的 data 或 ref —— 不行，插槽内容始终在父组件作用域，只能靠子组件主动通过 <slot :xxx></slot> 暴露
• 用 slot="xxx"（Vue 2 旧写法）搭配作用域传参 —— 已废弃，必须用 v-slot:xxx 或 #xxx
• 父组件写了 v-slot，但子组件 <slot></slot> 没绑定任何属性 —— 那么解构出来的对象为空，不会报错但拿不到数据

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