Vue父组件监听子组件emit事件附加自定义参数时原参数undefined问题

问题原因 #

你在事件绑定中直接写changeClassification(classification, 'overall')时，代码里的classification会默认读取父组件当前作用域的变量，而非子组件$emit传递的参数，因此会出现undefined的问题。

解决方案1：使用Vue内置的$event变量 #

Vue提供了内置变量$event用于接收子组件触发事件时传递的参数，直接替换你写的classification即可：

// PARENT COMPONENT (Fixed)
<div>
    ...
    <ClassificationBar @ChangeClassification="changeClassification($event, 'overall')" :classification="overallClassification"/>
    ... 
</div>

methods: {
    changeClassification(classification, source) {
        // 此时两个参数都可以正常获取
        console.log(classification, source);
    },
}

解决方案2：使用内联箭头函数（更通用，支持多参数场景） #

如果子组件会$emit多个参数，或者需要更灵活的参数处理，可以用内联箭头函数接收子组件传递的所有参数：

// PARENT COMPONENT (Fixed)
<div>
    ...
    <ClassificationBar @ChangeClassification="(classification) => changeClassification(classification, 'overall')" :classification="overallClassification"/>
    ... 
</div>

如果子组件emit多个参数，比如this.$emit('ChangeClassification', classification, level)，可以写成：

@ChangeClassification="(classification, level) => changeClassification(classification, level, 'overall')"

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