Vue2 $emit 没有触发回调答案

【问题标题】：Vue2 $emit not firing the callbackVue2 $emit 没有触发回调
【发布时间】：2021-05-02 12:23:34
【问题描述】：

使用 Vue2，我在页面上有一个书籍列表，其中详细信息通过子组件显示。用户可以从子组件中删除其中一本书。我希望列表在删除后更新。从数据库中删除记录后，我正在使用来自孩子的 $emit 。我可以从控制台看到 $emit 与有效负载中正确的新书籍列表一起发送。但是，父级中的回调函数没有被触发。我可以判断，因为我在回调开始时拥有的 console.log 没有显示在控制台中。

对我做错了什么有什么建议吗？

这是父级中的内容：

<div v-for="book in books" :key="book.BookID"  @book-refresh="refreshbooks">
  <BookCard :book="book" />
</div>

这里是回调函数：

async refreshbooks(newbooks) {
  console.log('in books.vue, starting refreshBooks, newbooks is: ', newbooks)
  this.$set(this, "books", newbooks)
  .bind(this)
},

这是触发 $emit 的函数（在子组件中）中的内容：

async deleteBook(bookID) {
this.dialogdelete = false
await (EventService.deleteBook(bookID, this.user.UserID))
  .then((newbooks) => {
    this.$emit('book-refresh', newbooks)
  }
    )

},

【问题讨论】：

你能创建一个minimal reproducible example 像一个密码箱吗？

标签： vuejs2

【解决方案1】：

TJ，谢谢你的建议。我按照你说的做了，并创建了有效的 mre。然后我回去看看有什么不同。我唯一改变的是函数的名称。我将 book-refresh 和 refreshbooks 全部更改为简单的刷新。现在它完美地工作了。我还没有花时间看看我是否只是没有正确匹配名称，或者是否有一些关于连字符的名称？我昨天确实在某处读到混合大小写有所不同，所以也许？无论如何，保持超级简单有助于我继续前进。

再次感谢您帮助我看到森林而不是树木！

【讨论】：