Vue 3 中的 `update:modelValue` 事件详解

在 Vue 3 中，update:modelValue 事件通常与 v-model 指令一起使用，以实现自定义组件的双向数据绑定。以下是对该事件的详细分析：

事件定义#

首先，我们需要在组件中定义 update:modelValue 事件。可以使用 defineEmits 函数来声明组件可以发出的事件：

1
const emit = defineEmits(['update:modelValue']);

属性定义#

接下来，我们需要定义组件接收的 modelValue 属性。可以使用 defineProps 函数来声明组件的 props：

1
const props = defineProps({
2
    modelValue: {
3
        type: Boolean,
4
        default: false
5
    }
6
});

创建计算属性#

为了实现双向数据绑定，我们可以创建一个计算属性 _modelValue。这个计算属性的 get 方法返回 modelValue 的当前值，而 set 方法则触发 update:modelValue 事件并传递新值：

1
const _modelValue = computed({
2
    get: () => {
3
        return props.modelValue;
4
    },
5
    set: (val) => {
6
        emit('update:modelValue', val);
7
    }
8
});

完整示例#

以下是一个完整的示例，展示了如何在 Vue 3 中使用 update:modelValue 事件实现双向数据绑定：

1
<script lang="ts" setup>
2
import { computed } from "vue";
3

4
const emit = defineEmits(['update:modelValue']);
5
const props = defineProps({
6
    modelValue: {
7
        type: Boolean,
8
        default: false
9
    }
10
});
11
const _modelValue = computed({
12
    get: () => {
13
        return props.modelValue;
14
    },
15
    set: (val) => {
16
        emit('update:modelValue', val);
17
    }
18
});
19
</script>
20

21
<template>
22
  <input type="checkbox" v-model="_modelValue">
23
</template>
24

25
<style lang="scss" scoped>
26
/* 样式代码 */
27
</style>

总结#

通过使用 defineEmits 和 defineProps 函数，我们可以轻松地在 Vue 3 组件中实现 update:modelValue 事件，从而实现双向数据绑定。这种设置允许组件与 v-model 无缝配合，使父组件和子组件之间的数据同步变得更加简单和高效。