Vue父组件监听子组件事件的核心是“子触发、父监听”：子组件用$emit（Vue 2）或defineEmits（Vue 3）抛出自定义事件，父组件用@事件名绑定处理函数；还可监听子组件生命周期钩子、透传DOM事件、或响应ref调用后的反馈事件。
父组件监听子组件事件，核心是利用 Vue 的 “自定义事件 + v-on” 机制，遵循“子触发、父监听”的单向通信原则。关键在于子组件用 $emit（Vue 2）或 defineEmits（Vue 3）抛出事件，父组件用 @事件名 或 v-on:事件名 绑定处理函数。
以下是最常用、最实用的几种方式，按场景分类说明：
通过自定义事件实现子传父（最标准做法）
这是 Vue 官方推荐、最清晰可控的方式。
- 子组件内部，在需要的时机（如按钮点击、数据更新后）调用 $emit('事件名', 数据)（Vue 2）或 emit('事件名', 数据)（Vue 3
setup） - 父组件在使用子组件标签时，用 @事件名="处理函数" 或 v-on:事件名="处理函数" 监听
- 事件名建议用 kebab-case（如
data-updated），避免和原生事件冲突
示例（Vue 3）：
const emit = defineEmits(['submit-form']);
const handleSubmit = () => {
emit('submit-form', { name: 'Alice', age: 25 });
};
监听子组件生命周期钩子（无需子组件配合）
父组件可直接监听子组件的挂载、更新、卸载等阶段，适合做初始化、清理或状态同步。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- Vue 2：用 @hook:mounted、@hook:beforeDestroy 等
- Vue 3：对应改为 @hook:mounted、@hook:beforeUnmount（注意钩子名变化）
- 不需要子组件写
$emit，父组件直接监听即可
示例（Vue 3）：
监听子组件内部 DOM 事件（透传式）
当子组件只是包装一层 DOM 元素（如封装一个带样式的按钮），想让父组件直接响应其原生事件，可用 v-on="$listeners"（Vue 2）或 v-on="listeners"（Vue 3 中需显式透传）。
- 适用于子组件本身不处理 click/input 等事件，仅作样式/结构封装
- Vue 3 中更推荐在子组件模板中用 @click="$emit('click', $event)" 显式转发
监听子组件 ref 实例方法调用后的反馈（进阶配合）
若父组件通过 ref 主动调用子组件方法（如 this.$refs.child.doSync()），子组件可在方法执行完毕后 $emit 一个完成事件，通知父组件结果。
- 适合异步操作后反馈（如表单校验、API 请求结束）
- 比单纯调用方法更利于解耦和状态追踪
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
