vue3 update:modelValue 用法

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

标准使用

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

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

自定义模型参数

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

<template>
  <input
    type="color"
    :value="modelValue"
    @input="updateValue($event.target.value)"
  >
  <input
    type="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>
  <ColorPicker
    v-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>

在这个例子中，颜色和透明度分别通过v-model和v-model:opacity进行绑定，每个绑定分别监听它们自己的更新事件。

总结

update:modelValue是Vue 3中用于v-model的默认事件命名约定，但不是固定不变的。开发者可以通过指定v-model的参数来自定义这些名称，这提供了额外的灵活性，使得组件可以根据不同的情况进行调整。这种灵活性是Vue 3对现代应用开发需求的响应。