Nuxt3（Vue3）中使用emits与不使用时值为何出现差异？

核心逻辑：Vue对自定义事件与原生DOM事件的处理规则不同 #

当组件声明emits: ['change']时，Vue会将change识别为组件自定义事件；未声明时，Vue会默认把它当作原生DOM事件处理，两种处理逻辑直接导致了this.value的差异。

1. 声明emits: ['change']时的行为 #

• 一旦在emits数组里注册change，Vue就明确这是你自定义的组件事件，不会再将其绑定到组件根元素的原生change事件上。
• 此时你在计算属性text的set方法中调用this.$emit('change', 目标字符串)，传递的字符串会被父组件接收并同步赋值给value prop，所以console.log(this.value)输出的是字符串。

2. 未声明emits: ['change']时的行为 #

• 没有声明emits时，Vue会把change事件当作原生DOM事件，自动绑定到组件的根DOM元素（比如input、select这类表单元素）。
• 触发事件时，原生DOM事件会自动传递一个Event对象作为参数，而非你手动传递的字符串。父组件接收到这个Event对象后会赋值给value prop，但你的value prop类型应为字符串，因此会触发Invalid prop: type check failed的类型警告，同时this.value就变成了Event对象。

补充说明 #

Vue3要求组件的自定义事件必须在emits中声明，这既是规范，也能避免自定义事件与原生DOM事件的冲突，同时让组件的事件接口更清晰。

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