具名插槽是vue.js中通过name属性精准分发内容的机制，子组件用声明，父组件用v-slot:xxx或#xxx指定内容；支持多插槽、作用域数据传递及动态名称，需注意命名规范与语法限制。

具名插槽（Named Slots）是 Vue.js 中实现组件内容精准分发的关键机制，它让父组件能将不同内容“投递”到子组件中预定义的多个插槽位置，从而提升组件复用性与结构清晰度。

什么是具名插槽？

默认插槽只能接收一份匿名内容，而具名插槽通过 name 属性标识不同插槽位置。子组件用 <slot name="xxx"></slot> 声明，父组件用 v-slot:xxx（或简写 #xxx）指定内容归属。

• 子组件内可定义多个具名插槽，如 header、footer、actions
• 父组件中每个 v-slot:xxx 只会渲染到对应名称的插槽，互不干扰
• 未匹配的具名内容不会被渲染，也不会回退到默认插槽（除非显式使用 v-slot:default）

基础用法：三栏布局示例

假设封装一个卡片组件 BaseCard.vue，支持自定义头部、主体和操作区：

子组件（BaseCard.vue）：

父组件中使用：

Ainative Vue Sdk

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

下载

  
  
  

作用域插槽 + 具名插槽：带数据的内容分发

当子组件需要向插槽传递数据（如列表项、状态），可结合作用域插槽。具名插槽同样支持接收 prop：

• 子组件中：<slot name="item" :user="user" :index="index"></slot>
• 父组件中：<template user index>{{ index + 1 }}. {{ user.name }}</template>
• 多个具名作用域插槽可各自解构不同数据，互不影响

注意事项与常见误区

使用具名插槽时需注意几个关键点：

• name 值必须是合法标识符：避免空格、特殊符号；若含短横线（如 user-info），需用引号包裹：v-slot:"user-info"
• 不能混用简写与完整写法：同一组件内不要对同一个插槽既用 #header 又用 v-slot:header
• 动态插槽名需用方括号语法：v-slot:[dynamicName]，常用于循环生成插槽
• Vue 3 中 v-slot 只能用在直接子元素上（即必须紧贴组件标签），否则会被忽略

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