Vue事件处理与回调函数是实现交互的核心机制，涵盖模板绑定、methods定义、父子通信（$emit/defineEmits）、ref调用子组件方法及异步回调（Promise、watch、生命周期钩子）。
Vue 组件开发中，事件处理和回调函数是实现交互逻辑的核心机制。它们不是简单的“点了就执行”，而是围绕响应时机、作用域控制和组件解耦展开的一套协作体系。
事件绑定与回调函数定义位置
在 Vue 模板中，用 @click、@input 等指令绑定原生或自定义事件，其值必须是一个已定义的方法名（如 handleClick）或内联表达式。这些方法应统一写在 methods 选项中（Options API）或 setup() 内通过 defineEmits 和普通函数声明（Composition API）。
- 不推荐在模板里写复杂逻辑，例如
@click="count++"仅适合极简场景；涉及数据处理、异步、条件分支时，务必抽成 methods 中的函数 - 回调函数内部的 this 默认指向当前组件实例（Options API），可直接访问
this.msg、this.fetchData()等 - 使用箭头函数定义回调（如
@click="() => doSomething()"）会丢失 this 绑定，应避免
父子组件间基于 $emit 的回调通信
子组件通过 $emit 触发事件，父组件用 @xxx 监听并传入处理函数——这是最标准的“子→父”回调模式。
- 子组件中调用
this.$emit('update', value)，父组件写<child></child>，onUpdate就是接收参数的回调函数 - Vue 3 的
defineEmits支持显式声明事件及类型，提升可维护性：const emit = defineEmits(['submit', 'cancel']) - 事件参数可多个传递：
emit('change', newVal, oldVal, event)，父组件回调函数形参需一一对应
反向回调：父组件调用子组件方法
当父组件需要主动触发子组件行为（如重置表单、打开弹窗），可用 ref + defineExpose 实现“父→子”回调。
立即学习“前端免费学习笔记（深入）”；
- 子组件用
defineExpose({ reset() { ... } })暴露指定方法 - 父组件通过
ref获取子组件实例：<child ref="childRef"></child>，然后在方法中调用this.childRef.reset() - 这种方式绕过事件流，适合强控制场景，但要避免过度使用导致耦合加重
异步操作与生命周期中的回调函数
回调不仅用于用户交互，也广泛存在于数据加载、状态变更等异步流程中。
- AJAX 请求后常用
.then(res => {...})和.catch(err => {...})作为 Promise 回调，更新 data 或提示错误 - watch 监听数据变化时，回调函数接收新旧值：
watch: { searchKey: (newVal, oldVal) => { ... } } - 生命周期钩子（如
mounted、updated）本质也是框架在特定时机调用的回调函数，适合初始化、DOM 操作等
