Vue2子组件向父组件传参失败，如何正确传递参数？

问题出在父组件的事件绑定写法上：你用goToSpots()的方式调用函数时，没有传递子组件通过$emit发送的参数，导致父组件的id参数无法接收到值，最终this.selected为undefined。

正确的两种写法： #

1. 直接绑定函数名（推荐）：Vue会自动将$emit的参数传递给父组件的处理函数

<Main
    class="px-5"
    @goToSpots="goToSpots"
/>

2. 使用箭头函数显式传递参数：如果需要在传递前做额外处理，可采用这种方式

<Main
    class="px-5"
    @goToSpots="(id) => goToSpots(id)"
/>

子组件的$emit代码无需修改，保持原有逻辑即可：

goTo(id: string) {
    this.$emit('goToSpots', id)
},

父组件的处理函数也保持不变：

goToSpots(id: string) {
    this.selected = id
},

内容的提问来源于stack exchange，提问作者El Hombre Sin Nombre