具名插槽与作用域插槽混用可实现父组件按区域精准投放内容并基于子组件数据动态渲染；子组件用<slot name="xxx" :prop="data">暴露数据，父组件用v-slot:xxx="{ prop }"接收解构使用。

Vue 插槽的具名与作用域混用，本质是让父组件既能按区域精准投放内容，又能基于子组件传递的数据动态渲染——这在封装高复用表单、列表、卡片等组件时非常实用。

具名插槽 + 作用域插槽怎么写

核心在于：子组件中定义带 name 的 ，同时通过 :prop="data" 向外暴露数据；父组件用 v-slot:name="slotProps" 接收并使用。

• 子组件中：<slot name="actions" :item="item" :index="index"></slot>
• 父组件中：<template #actions="{ item, index }"><button @click="edit(item)">编辑</button></template>
• 注意：v-slot 只能用在 <template> 标签上，且不能和普通子元素混在同一层级（否则会报错）

典型应用场景

适合需要“分区域 + 带数据”的交互型组件，比如动态表单、可配置操作列的表格、带状态标签的列表项。

vue-component-analyzer

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

下载

• 表单字段区用 #label 插入标题，#input 插入输入控件，#tips 插入提示文字
• 每个字段还可能需要根据后端返回的 item.type 渲染不同控件（如 select / date-picker / switch），这时就要靠 :item="item" 把字段元信息传出去
• 操作按钮区（如 #actions）常需访问当前行数据，实现「删除本行」「复制配置」等逻辑

常见写法与避坑点

实际开发中容易出错的地方集中在语法细节和作用域理解上。

立即学习“前端免费学习笔记（深入）”；

• 命名必须一致：子组件 name="header"，父组件必须用 #header 或 v-slot:header，不能写成 slot="header"（Vue 2.6+ 已废弃）
• 作用域数据要解构清楚：如果子组件传的是 :info="item"，父组件就得写 v-slot:footer="{ info }"，不是 { item }
• 默认插槽也能带作用域：不加 name 的 <slot :user="currentUser"></slot>，父组件用 v-slot="{ user }" 接收，等价于 v-slot:default
• 不要在同一个 <template> 上既写 #xxx 又写 v-slot:scope：语法冲突，会报解析错误

一个完整小例子

封装一个支持自定义标题、内容、操作栏，且每行数据可被父组件控制渲染的用户卡片：

• 子组件 UserCard.vue：

  <div class="card">
    <header><slot name="header" :user="user">{{ user.name }}</slot></header>
    <main><slot :user="user">{{ user.email }}</slot></main>
    <footer><slot name="footer" :user="user"><button @click="$emit('delete', user.id)">删除</button></slot></footer>
  </div>

• 父组件调用：

  <UserCard v-for="u in users" :key="u.id" :user="u">
    <template #header="{ user }"><h3 style="color: #007acc">{{ user.name }}</h3></template>
    <template #default="{ user }"><p>邮箱：{{ user.email }}</p><p>状态：{{ user.active ? '在线' : '离线' }}</p></template>
    <template #footer="{ user }"><button @click="ban(user)">禁用</button></template>
  </UserCard>