当前位置：首页 > news >正文

在Vue3中，如何在父组件中使用v-model与子组件进行双向绑定？

news 来源：原创 2025/4/25 5:34:08

在 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>