vue3组件之间双向绑定

Vue3中组件的双向绑定统一使用 v-model 进行处理，并且可以和多个数据进行绑定，例如 v-model:foo、v-model:bar。
v-model 等价于

:model-value="someValue"

和

@update:model-value="someValue = $event"

v-model:foo 等价于

:foo="someValue"

和

@update:foo="someValue = $event"

父子组件之间双向绑定

<!-- 父组件 --><script setup>import ChildModulefrom './ChildModule.vue'import{ ref }from'vue'const msg =ref('hello vue3!')</script><template><ChildModule v-model="msg"/></template>

<!-- 子组件 --><script setup>defineProps(['modelValue'])const emit =defineEmits(['update:modelValue'])</script><template><div @click="emit('update:modelValue', 'hi vue3！')">{{ modelValue }}</div></template>

子组件可以结合 input 使用：

<!-- 子组件 --><script setup>defineProps(['modelValue'])const emit =defineEmits(['update:modelValue'])</script><template><input :value="modelValue"@input="emit('update:modelValue', $event.target.value)"/></template>

也可以结合 computed 一起使用：

<!-- 子组件 --><script setup>import{ computed }from'vue'const props =defineProps(['modelValue'])const emit =defineEmits(['update:modelValue'])const newValue =computed({get(){return props.modelValue
  },set(value){emit('update:modelValue', value)}})</script><template><input v-model="newValue"/></template>