带参数的 Vue 自定义事件返回未定义

Question

我在 Vue 应用程序中有父级和组件。 Childe 组件需要向父级发出自定义事件并向他发送一些参数。 孩子长得像

<b-button
    v-if="type === 'removed' && campaign && !campaign.authorized"
    class="is-fullwidth"
    type="is-primary"
    :loading="deleteBtnLoading"
    @click="updateDeleted($event, false)"
    >{{
        click
    }}</b-button
>

updateDeleted(e, save = false) {
    console.log(e);  // This works
    console.log(save);  // This works
    this.$emit('updateDeleted', save);
}

父组件无法捕获保存值。 代码看起来像

<DraftChangedModal
    type="removed"
    :devices="removedModalDevices"
    :campaign="campaign"
    :user="user"
    @updateDeleted="updateDraftDeleted(save)"
/>

async updateDraftDeleted(e, save) {
    console.log(e);  // undefined
    console.log(save);  // undefined
},

我究竟做错了什么？ 谢谢你的帮助。

Answer 1

在async updateDraftDeleted(e, save) function 签名中如何命名 function 参数并不重要。 如果在调用时提供了undefined的 arguments，则参数undefined 。

updateDraftDeleted(save)表达式使用具有此模板的组件的本地save属性。 如果没有this.save ， save参数是未定义的。

有一个特殊的$event变量可用于绑定到事件的表达式。 这应该在父级中以与子级相同的方式完成：

@updateDeleted="updateDraftDeleted($event)"