vue3 emits: [‘update:modelValue‘]

youhebuke2252024-04-19 16:34

在 Vue.js 中，emits 选项用于声明组件可以触发的事件。['update:modelValue'] 是 Vue 3 中用于自定义组件与 v-model 指令配合工作的特殊事件名。

当您使用 v-model 指令与自定义组件进行双向绑定时，Vue 内部实际上是在做以下操作：

将 value 作为 prop 传递给组件。
监听组件触发的 update:modelValue 事件，并更新父组件的数据。

所以，当您在自定义组件中声明 emits: ['update:modelValue']，您实际上是在告诉 Vue："这个组件可以触发一个事件来更新与 v-model 绑定的值"。

以下是一个简单的例子：

MyComponent组件

vue 复制代码

<template>
  <input :value="modelValue" @input="updateValue">
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

在这个例子中，自定义组件接收一个名为 modelValue 的 prop，并在输入框的值发生变化时触发 update:modelValue 事件。这样，当您在父组件中使用 v-model 与此组件绑定时，父组件的数据将会随着输入框的值的变化而更新。

vue 复制代码

<MyComponent v-model="someData" />

这里的 someData 会随着 MyComponent 内部的输入框的值的变化而更新。