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

在 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 -->
    <ChildComponent
      v-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 可以让代码更加简洁和易于维护。