setup中context提供attrs、slots、emit三个非响应式属性：attrs透传未声明属性，slots渲染插槽内容，emit触发自定义事件，需解构使用且emit不可单独解构调用。
Vue 3 的 setup 函数中，context 是一个非响应式的上下文对象，用来替代 Vue 2 中 this 上的部分能力。它不包含 data、methods 等，而是聚焦于组件外部传入的“上下文信息”——主要是 attrs、slots 和 emit。正确使用它们，能帮你处理透传属性、插槽渲染和事件分发。
如何解构并使用 context 的三个核心属性
在 setup(props, context) 中，context 是第二个参数，推荐直接解构使用：
-
attrs：获取父组件传入但未在props中声明的 attribute（如class、id、自定义属性），是非响应式对象，适合透传给子元素 -
slots：访问插槽内容，每个插槽名对应一个函数（如slots.default()、slots.header()），需调用才返回 VNode 数组 -
emit：触发自定义事件的方法，用法类似 Vue 2 的this.$emit，第一个参数是事件名，后续为载荷
使用 attrs 透传未声明的属性
attrs 常用于封装基础组件（如按钮、输入框），把父组件传来的样式类、数据属性等原样透传到根元素上：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 直接读取：
console.log(context.attrs.class)或context.attrs['data-id'] - 结合
v-bind="$attrs"在模板中批量绑定：<button v-bind="$attrs"></button> - 注意：
attrs不包含已声明为props的属性，也不会包含class和style（它们默认会合并到根元素）
通过 slots 渲染插槽内容
slots 是一个对象，键为插槽名（default、header、footer 等），值为返回 VNode 的函数：
立即学习“前端免费学习笔记（深入）”；
- 渲染默认插槽：
context.slots.default?.()（加可选链避免报错） - 判断具名插槽是否存在：
if (context.slots.header) { return context.slots.header() } - 在组合式 API 中，插槽内容不会自动响应更新，但 VNode 本身支持响应式依赖追踪（例如内部用了
ref）
用 emit 触发自定义事件
emit 是函数，必须在 setup 中显式调用才能向父组件通信：
- 触发无参事件：
context.emit('submit') - 传参：
context.emit('update:modelValue', newValue)（配合v-model协议） - 建议配合
emits选项声明事件，提升类型安全和开发体验：emits: ['change', 'error'] - 不能解构成独立变量再用（如
const { emit } = context后直接调用），否则会丢失this绑定——应始终通过context.emit或解构时保持引用
