语法糖

双向绑定

在自定义组件中，你可以通过 emit('update:modelValue', newValue) 来通知父组件更新绑定的 v-model 的值。这样父组件上的 v-model=“xxx” 所对应的 xxx 就会变成 newValue。

例如，你有一个弹窗组件，关闭时希望通知父组件关闭它：

1<script setup>
2const emit = defineEmits(['update:modelValue'])
3
4function closeDialog() {
5  emit('update:modelValue', false) // 通知父组件关闭弹窗
6}
7</script>

在父组件中，你可以这样使用：

1<MyDialog v-model="showDialog" />

当你在子组件中调用 emit(‘update:modelValue’, false) 时，父组件的 showDialog 就会变为 false。

c084bed5a1eb4225aa1f3fd7ec3cd1df.MDvq_WQojsTyDxdbNIYPbVy3