方法参数中的$符号有何用途？Vue两种事件传参写法是否有差异？

1. 方法参数中的‘$’字符是否有特定用途？ #

• 在Vue、Angular这类前端框架中，$开头的参数（比如$event）是框架内置的特殊变量：
  • 对应原生DOM事件（如click）时，$event指代原生事件对象，包含target、preventDefault等属性；
  • 对应子组件通过$emit触发的自定义事件时，$event指代子组件传递过来的数据。
• 在原生JavaScript中，$只是标识符的合法组成部分，语言层面没有特殊含义，但部分社区或项目会用它标记框架内置变量、全局变量，和自定义变量做区分。

2. 在方法的参数名中添加‘$’字符是否存在充分合理的理由？ #

有几种合理场景：

• 遵循框架约定：比如Vue中用$event明确指代事件相关参数，让代码可读性更高，其他开发者一眼就能识别这是框架提供的特殊参数；
• 避免命名冲突：如果参数名和方法内部变量名重复，加$可以快速区分，比如handleInput($value)，避免和内部的value变量混淆；
• 团队规范统一：如果团队约定用$标记特定类型的参数（比如全局状态、事件对象），统一风格能提升协作效率。
  但如果是普通业务参数，没必要强行加$，反而可能增加代码的混淆性。

3. 两种写法的差异 #

写法1：<childComponent @updateMissionPriority="updateMissionPriority($event)" /> #

• $event是Vue框架自动注入的参数：
  • 如果子组件通过this.$emit('updateMissionPriority', missionData)传递数据，$event就等于missionData，会被直接传给父组件的updateMissionPriority方法；
  • 如果是原生DOM事件，$event就是原生事件对象；
  • 当子组件传递多个参数时，$event只能拿到第一个参数。

写法2：<childComponent @updateMissionPriority="updateMissionPriority(param)" /> #

• 这种写法存在隐患：Vue会把param当成当前模板作用域中的变量去查找，如果没有定义过param，会直接报错；
• 若要正确接收子组件的参数，应该用箭头函数包裹：<childComponent @updateMissionPriority="(param) => updateMissionPriority(param)" />，此时param是自定义参数名，用来接收子组件传递的数据；
• 箭头函数写法支持接收多个参数，比如子组件传this.$emit('updateMissionPriority', p1, p2)，可以写成(p1, p2) => updateMissionPriority(p1, p2)，这是$event做不到的。

内容的提问来源于stack exchange，提问作者adila maloul