参数 returns 未定义的 Vue 自定义事件

Question

我有 parent 和 Vue 应用程序中的组件。 Childe componentt 需要向 parent 发出自定义事件并向他发送一些参数。 Child 看起来像

<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);
}

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

<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) 函数签名中如何命名并不重要。如果调用时提供了undefined个参数，则参数为undefined.

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

special $event variable 可用于绑定到事件的表达式。这应该在父级中以与在子级中相同的方式完成：

@updateDeleted="updateDraftDeleted($event)"

参数 returns 未定义的 Vue 自定义事件

Vue cunstom event with parameter returns undefined

vue.js

events

vuejs2

emit