在 Vue.js 中,emits 选项用于声明组件可以触发的事件。['update:modelValue'] 是 Vue 3 中用于自定义组件与 v-model 指令配合工作的特殊事件名。
当您使用 v-model 指令与自定义组件进行双向绑定时,Vue 内部实际上是在做以下操作:
- 将
value作为 prop 传递给组件。 - 监听组件触发的
update:modelValue事件,并更新父组件的数据。
所以,当您在自定义组件中声明 emits: ['update:modelValue'],您实际上是在告诉 Vue:“这个组件可以触发一个事件来更新与 v-model 绑定的值”。
以下是一个简单的例子:
MyComponent组件
<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 与此组件绑定时,父组件的数据将会随着输入框的值的变化而更新。
<MyComponent v-model="someData" />
这里的 someData 会随着 MyComponent 内部的输入框的值的变化而更新。