一文带你深入了解V-model实现数据双向绑定

<ChildComponent v-model="message" />

<ChildComponent :modelValue="message" @update:modelValue="val => message = val" />

<script setup>
import { defineProps, defineEmits } from 'vue';

// 接收父组件传递的 modelValue
defineProps({
  modelValue: String, // 父组件传递的值
});

// 定义更新事件
defineEmits(['update:modelValue']);

const updateValue = (newValue) => {
  // 触发事件，通知父组件更新数据
  emit('update:modelValue', newValue);
};
</script>

<template>
  <input :value="modelValue" @input="updateValue($event.target.value)" />
</template>

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

<!-- Parent.vue -->
<Child v-model="countModel" />

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>