什么时候在 Vue 发射名称中使用冒号？答案

【问题标题】：When to use colon in a Vue emit name?什么时候在 Vue 发射名称中使用冒号？
【发布时间】：2020-08-14 21:13:53
【问题描述】：

所以，我正在尝试理解其他人编写的代码，但有一件事我还没有弄清楚。为什么要在发射名称中使用冒号？这是一个例子：

this.$emit('update:compare', { key, values })

问题是我找不到监听这个发射的组件。我一直在寻找v-on:update:compare="" 和@update:compare=""，但找不到。结肠甚至有什么作用？

我在同一组件中发现了另一个我也不认识的东西：

  model: {
    prop: 'compare',
    event: 'update:compare',
  },

我猜这与它有关，但我无法弄清楚。有人能帮我解释一下吗？

【问题讨论】：

你看过这里的文档吗vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
谢谢，这解释了一些。所以，冒号只是记录我们打算做什么的一种方式。但我想你必须在父节点上有一个与之匹配的处理程序，比如我没有的<component @update:compare="callback">。
是的。父组件中必须有一个处理程序来处理发出的事件
@Magistern，不是@update:compare。这是:compare.sync。

标签： vue.js events eventemitter

【解决方案1】：

只是为了具体说明。上面 cmets 链接中的文档（值得一读），您可以将 .sync 添加到 v-bind 以允许道具自动“向上”传递回父级（2 路绑定）。在我开始研究 vue 查询构建器库并遇到与 OP 完全相同的问题之前，我也没有意识到这一点。 https://github.com/dabernathy89/vue-query-builder

<some-component :someData.sync="someData" />


// Inside component method:
this.$emit('update:someData', "New value");

【讨论】：