vue3 update:modelValue 用法

在Vue 3中，update:modelValue是v-model指令的默认事件，用于在组件内部通知父组件更新绑定的值。这种命名约定是固定的，当你在组件上使用v-model而没有指定参数时。然而，Vue 3也提供了灵活性，允许开发者自定义绑定的属性和事件，以适应不同的场景和需求。

标准使用

当你在Vue组件上使用v-model时，默认情况下它绑定到组件的modelValue prop，并监听update:modelValue事件。这是Vue框架的标准命名约定。这意味着，如果你在自定义组件内部需要接收输入并希望外部能够通过v-model与之双向绑定，你需要：

接收一个名为modelValue的prop。
在需要更新值时，触发名为update:modelValue的事件。

自定义模型参数

Vue 3支持通过使用v-model的参数来自定义这些名称。这对于创建可以接收和更新多个值的组件特别有用。例如，如果你有一个组件需要同时管理两种类型的数据（比如，一个颜色选择器可能需要分别控制颜色和透明度），你可以这样做：

<template><inputtype="color":value="modelValue"@input="updateValue($event.target.value)"><inputtype="range":value="opacity"@input="updateOpacity($event.target.value)">
</template><script setup>
import { defineProps, defineEmits } from 'vue';const props = defineProps({modelValue: String,opacity: Number
});const emit = defineEmits(['update:modelValue', 'update:opacity']);function updateValue(value) {emit('update:modelValue', value);
}function updateOpacity(value) {emit('update:opacity', value);
}
</script>

在父组件中使用：

<template><ColorPickerv-model="color"v-model:opacity="colorOpacity"/>
</template><script setup>
import { ref } from 'vue';
import ColorPicker from './ColorPicker.vue';const color = ref('#ffffff');
const colorOpacity = ref(100);
</script>