前端/移动开发面试题更新 2026-08-05

在 Vue 中,当子组件通过自定义事件向父组件传递多个参数时,父组件的事件处理函数应如何定义才能正确接收这些参数?

前端/移动开发技术原理Vue

考察说明

考查对 Vue 自定义事件传参机制及父组件接收多参数写法的掌握。

回答思路

  1. 【回答框架 1】在 Vue 中,子组件通过 $emit 触发自定义事件并传递参数,例如 this.$emit('my-event', param1, param2)。父组件在模板中使用 v-on 或 @ 监听该事件,事件处理函数按顺序接收这些参数,如 @my-event="handleEvent",在 methods 中定义 handleEvent(param1, param2) 即可。
  2. 【回答框架 2】若父组件使用内联语句,可通过 $event 访问第一个参数,但多个参数时需使用箭头函数或方法引用,如 @my-event="(a, b) => handleEvent(a, b)",或直接 @my-event="handleEvent" 让方法自动接收所有参数。
  3. 【回答框架 3】注意参数顺序与 $emit 的传递顺序一致,且事件名需完全匹配,包括大小写。Vue 2 中事件名建议使用 kebab-case,Vue 3 中推荐使用 camelCase 或 kebab-case 均可,但需保持一致。
  4. 【回答框架 4】若需传递对象作为单个参数,可封装为对象,如 this.$emit('my-event', { param1, param2 }),父组件接收一个对象参数,便于管理。
  5. 【关键点 1】子组件用 $emit 传递多个参数,父组件方法按顺序接收。
  6. 【关键点 2】内联语句中 $event 只代表第一个参数,多参数需用方法引用或箭头函数。
  7. 【关键点 3】事件名需匹配,Vue 2 建议 kebab-case,Vue 3 推荐 camelCase 或 kebab-case。
  8. 【关键点 4】可封装为对象参数简化传递。