为什么 @change 或 @input 可以与自定义 v-model 组件一起使用？

Question

假设我创建了一个自定义组件Comp.vue，它基本上是一个带有model-value 属性和@update="$emit('update:modelValue', $event.target.value) 的包装输入元素。

它可能看起来像这样：

<template>
  <div>
  <label :for="name" class="block relative">
    <div>
        {{ label }}
    </div>
        <input
          :name="name"
          :type="type"
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)"
        />
  </label>
    </div>
</template>

<script>

export default {
  props: {
    label: {
      required: true,
      type: String,
    },
    modelValue: {
      required: false,
      default: "",
      type: [String, Number],
    },
    type: {
      default: "text",
      type: String,
    },
    name: {
      required: false,
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
};
</script>

现在我已经在 App.vue 中导入了该组件。

为什么会这样：

<Comp @change="doSth1()" />
<Comp @input="doSth2()" />

我的自定义 Comp.vue 从不发出任何这些事件。

我创建了一个自定义 Playground 来记录这些事件： Playground Link

Answer 1

由于 input 和 change 是原生 DOM 事件，Vue 会自动监听它们。

请查看 Vue 文档：Directives, v-on 和 HTMLElement, input events

在普通元素上使用时，它只监听native DOM events。在自定义元素组件上使用时，它会侦听该子组件上发出的自定义事件。

看起来 Vue 仍然通过自定义组件监听原生 HTML 输入事件。

例如，还有一个beforeinput 事件，它也会自动触发并被 Vue 监听。所以你也可以为它添加一个指令。

@beforeinput="beforeinputTriggered()"

更新回答@Thibault

modelValue 本身的更改不会触发“输入/更改”事件。如果我们移除 Comp.vue 中的 HTML 输入元素，那么 'beforeinput/input/change' 事件将不会被触发。

这是证明：same component with a +1 button 只触发 @update:modelValue 事件。

Answer 2

因为您基本上是将 modelValue 作为道具传递。而且我相信，当 modelValue 的值发生变化时，它会触发输入或更改事件。