vue中具名作用域插槽需子组件用暴露，父组件用v-slot:xxx="{ prop }"在内解构接收，名称必须严格匹配，且禁用旧语法。

Vue 单文件组件中编写具名插槽与作用域插槽，关键在于子组件用 <slot name="xxx" :prop="data"></slot> 暴露带数据的命名出口，父组件用 v-slot:xxx="{ prop }" 解构接收——二者必须严格对应，且 v-slot 只能写在 <template></template> 标签上。

子组件：定义具名 + 作用域插槽出口

在 <template></template> 中，为不同区域设置 name，并通过绑定属性（如 :item、:index）传递数据：

• 头部区域：<slot name="header" :title="cardTitle">默认标题</slot>
• 操作区域：<slot name="actions" :item="user" :disabled="user.locked"><button>删除</button></slot>
• 默认插槽也可带作用域：<slot :user="user" :role="user.role">{{ user.name }}</slot>

父组件：用 v-slot 接收并解构使用

调用时，每个 v-slot:xxx 必须包裹在独立的 <template></template> 内，解构名需与子组件传入的属性名一致：

• 具名+作用域组合：<template title><h2>{{ title.toUpperCase() }}</h2></template>
• 多参数解构：<template item disabled><button :disabled="disabled">移除</button></template>
• 默认插槽带作用域：<template v-slot="{ user, role }"><span class="tag">{{ role }}</span> {{ user.name }}</template>

常见错误避坑点

实际编码中容易卡在这几个地方：

vue-component-analyzer

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

下载

• 把 v-slot:header 写在普通标签上（比如直接写在 <div> 上）——必须用 <code><template></template>
• 子组件传 :info="item"，父组件却写 v-slot:header="{ item }" ——解构名要完全匹配
• 混用旧语法，比如写 slot="header" 或 slot-scope ——Vue 3 已废弃，只认 v-slot 或简写 #
• 在一个 <template></template> 上同时写 #header 和 v-slot:scope ——语法冲突，会报错

一个可运行的小例子

子组件 UserCard.vue：


<script setup><br> const props = defineProps({ user: Object })<br> </script>

父组件中调用：