何时在 Vue 发出名称中使用冒号？

Question

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

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

问题是我找不到监听此发射的组件。我一直在寻找

v-on:update:compare=""

和

@update:compare=""

，但找不到。结肠到底有什么作用？

我在与发射相同的组件中发现了我也不认识的其他东西：

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

我想这与它有关，但我无法弄清楚。 请问有人可以帮我解释一下吗？

Answer 1

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

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


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

Answer 2

您可以在 vuejs 文档中阅读此文档。 https://vuejs.org/guide/components/v-model.html

WAY-1 为了使其真正发挥作用，该组件必须做两件事： 将原生元素的 value 属性绑定到 modelValue prop 当触发本机输入事件时，发出带有新值的 update:modelValue 自定义事件

 <!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

WAY-2

在此组件中实现 v-model 的另一种方法是使用具有 getter 和 setter 的可写计算属性。 get 方法应返回 modelValue 属性，set 方法应发出相应的事件：

    <!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>