在 Vue 3 里，借助 v-model 可以轻松实现父组件与子组件的双向绑定。以下为你详细介绍实现步骤与示例代码。
实现原理
v-model 在 Vue 3 里是一种语法糖，它本质上是 :modelValue 和 @update:modelValue 的组合。父组件借助 :modelValue 向子组件传递数据，子组件则通过 @update:modelValue 事件把数据变化反馈给父组件。
示例代码
子组件（ChildComponent.vue）
vue
<template><div><!-- 输入框绑定到 localValue --><input v-model="localValue" type="text" /></div>
</template><script setup>
import { ref, watch } from 'vue';
// 定义接收的 prop
const props = defineProps({modelValue: String
});
// 定义触发的事件
const emit = defineEmits(['update:modelValue']);// 创建一个本地响应式变量，初始值为父组件传递的 modelValue
const localValue = ref(props.modelValue);// 监听 localValue 的变化
watch(localValue, (newValue) => {// 当 localValue 变化时，触发 update:modelValue 事件通知父组件emit('update:modelValue', newValue);
});
</script>
父组件（ParentComponent.vue）
vue
<template><div><!-- 使用 v-model 绑定到 parentData --><ChildComponent v-model="parentData" /><!-- 显示父组件的数据 --><p>父组件中的数据: {{ parentData }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';// 创建父组件的响应式数据
const parentData = ref('初始数据');
</script>
代码解释
子组件
defineProps：定义接收的props，这里接收modelValue作为输入值。defineEmits：定义可以触发的事件，这里定义了update:modelValue事件。localValue：创建一个本地的响应式变量，初始值为父组件传递的modelValue。watch：监听localValue的变化，当它发生变化时，触发update:modelValue事件并将新值传递给父组件。
父组件
v-model：使用v-model指令将parentData绑定到子组件。parentData：创建一个响应式数据，用于存储和显示数据。
多 v-model 绑定
如果你需要在子组件中支持多个 v-model 绑定，可以为不同的 props 和 emits 事件设置不同的名称。
子组件（支持多个 v-model）
vue
<template><div><input v-model="textValue" type="text" /><input v-model="numberValue" type="number" /></div>
</template><script setup>
import { ref, watch } from 'vue';
// 定义接收的 props
const props = defineProps({textModelValue: { default: '' },numberModelValue: { default: 0 }
});
// 定义触发的事件
const emit = defineEmits(['update:textModelValue','update:numberModelValue'
]);// 创建本地响应式变量
const textValue = ref(props.textModelValue);
const numberValue = ref(props.numberModelValue);// 监听 textValue 的变化
watch(textValue, (newValue) => {// 当 textValue 变化时，触发 update:textModelValue 事件通知父组件emit('update:textModelValue', newValue);
});// 监听 numberValue 的变化
watch(numberValue, (newValue) => {// 当 numberValue 变化时，触发 update:numberModelValue 事件通知父组件emit('update:numberModelValue', newValue);
});
</script>
父组件（使用多个 v-model）
vue
<template><div><!-- 使用 v-model:text 和 v-model:number 分别绑定到 textData 和 numberData --><ChildComponentv-model:text="textData"v-model:number="numberData"/><!-- 显示父组件的文本数据 --><p>文本数据: {{ textData }}</p><!-- 显示父组件的数值数据 --><p>数值数据: {{ numberData }}</p></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';// 创建父组件的响应式数据
const textData = ref('');
const numberData = ref(0);
</script>
总结
通过以上步骤，你可以在 Vue 3 中实现父组件与子组件的双向绑定。使用 v-model 可以让代码更加简洁和易于维护。
