vue 3插槽结合解构赋值的核心是作用域插槽：子组件通过绑定属性（如:user、:index）传递数据，父组件用v-slot="{user, index}"解构接收，支持重命名、默认值、具名与动态插槽，需确保键名一致且在template内使用。

Vue 3 中插槽结合解构赋值，核心在于作用域插槽——子组件通过 <slot></slot> 向外传递数据，父组件用 v-slot 接收并解构，直接拿到变量使用。

子组件：用属性把数据传给插槽

在子组件模板中，给 <slot></slot> 添加绑定属性（如 :user、:index、:list），这些就是将要暴露给父组件的数据：

• <slot :user="currentUser" :index="i" :list="items"></slot>
• 属性名就是将来解构时的 key，必须和父组件解构的名称一致才能取到值
• 支持任意类型：字符串、对象、数组、函数都可传

父组件：用 v-slot + 解构语法接收

在父组件中，用 v-slot="{ user, index, list }" 或简写 #default="{ user, index, list }" 直接解构出参数：

Ainative Vue Sdk

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

下载

• <template v-slot="{ user, index }"><div>{{ index }}. {{ user.name }}</div> </template>
• 如果只用其中一部分，可以省略其他字段：v-slot="{ user }"
• 支持重命名：v-slot="{ user: userInfo }"，之后用 userInfo 访问
• 支持默认值：v-slot="{ user = {} }"，避免未传时访问 user.name 报错

具名作用域插槽也一样处理

不只是默认插槽，具名插槽同样支持解构：

• 子组件：<slot name="header" :title="cardTitle" :level="2"></slot>
• 父组件：<template title level><h2 :class="`h${level}`">{{ title }}</h2> </template>
• 动态插槽名也能用：v-slot:[slotName]="{ data }"，只要 slotName 是响应式变量即可

常见注意点

几个容易出错的地方要留心：

• 解构的 key 必须和子组件传的属性名完全一致，大小写、拼写都不能错，否则值为 undefined
• 不能在 v-slot 外部访问解构出的变量，它的作用域仅限于该 <template></template> 内部
• 如果子组件没传某个属性，解构时又没设默认值，直接使用会报错，建议加空值保护或默认值
• 不推荐在解构中调用方法或计算复杂逻辑，保持插槽内容轻量；复杂处理建议放在父组件的 setup 中预先准备好

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