子组件如何通过v-model实现数据的双向绑定

在 Vue 中，v-model 是一种语法糖，用于在表单元素或者组件上实现双向数据绑定。

下面分别介绍在 Vue 2 和 Vue 3 里子组件使用 v-model 实现数据双向绑定的具体方式。

Vue 2 中使用 v-model 实现双向绑定

在 Vue 2 里，v-model 本质上是 :value 和 @input 的语法糖。子组件需要接收 value 属性，并在数据变化时触发 input 事件。

父组件示例

<template><div><!-- 父组件数据 --><p>父组件的值: {{ parentData }}</p><!-- 使用 v-model 绑定到子组件 --><ChildComponent v-model="parentData" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: ''};}
};
</script>

子组件示例

<template><div><!-- 绑定输入框的值到 value 属性 --><input :value="value" @input="updateValue($event.target.value)" /></div>
</template><script>
export default {// 接收父组件传来的 value 属性props: ['value'],methods: {updateValue(newValue) {// 触发 input 事件，将新值传递给父组件this.$emit('input', newValue);}}
};
</script>

代码解释

• 父组件：使用 v-model 把 parentData 绑定到 ChildComponent 上。
• 子组件：
  • 通过 props 接收 value 属性，用于显示输入框的值。
  • 当输入框的值发生变化时，调用 updateValue 方法，在该方法里使用 $emit('input', newValue) 触发 input 事件，将新值传递给父组件。

Vue 3 中使用 v-model 实现双向绑定

在 Vue 3 中，v-model 对应的 prop 默认是 modelValue，事件是 update:modelValue。同时，使用 <script setup> 语法糖可以让代码更简洁。

父组件示例

<template><div><!-- 父组件数据 --><p>父组件的值: {{ parentData }}</p><!-- 使用 v-model 绑定到子组件 --><ChildComponent v-model="parentData" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';// 定义响应式数据
const parentData = ref('');
</script>

子组件示例（使用 <script setup>）

<template><div><!-- 绑定输入框的值到 modelValue --><input :value="modelValue" @input="updateValue($event.target.value)" /></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue';// 定义 props 接收 modelValue
const props = defineProps(['modelValue']);
// 定义可以触发的事件
const emits = defineEmits(['update:modelValue']);const updateValue = (newValue) => {// 触发 update:modelValue 事件，将新值传递给父组件emits('update:modelValue', newValue);
};
</script>

代码解释

• 父组件：使用 v-model 把 parentData 绑定到 ChildComponent 上。
• 子组件：
  • 使用 defineProps 接收 modelValue 属性。
  • 使用 defineEmits 定义 update:modelValue 事件。
  • 当输入框的值发生变化时，调用 updateValue 方法，在该方法里使用 emits('update:modelValue', newValue) 触发事件，将新值传递给父组件。

多 v-model 绑定（Vue 3.4+）

Vue 3.4 及以上版本支持多个 v-model 绑定，允许子组件同时处理多个双向绑定的数据。

父组件示例

<template><div><p>父组件的标题: {{ title }}</p><p>父组件的内容: {{ content }}</p><!-- 使用多个 v-model 绑定到子组件 --><ChildComponent v-model:title="title" v-model:content="content" /></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const title = ref('');
const content = ref('');
</script>

子组件示例（使用 <script setup>）

<template><div><input :value="title" @input="updateTitle($event.target.value)" /><textarea :value="content" @input="updateContent($event.target.value)" /></div>
</template><script setup>
import { defineProps, defineEmits } from 'vue';// 定义 props 接收多个 v-model 的值
const props = defineProps(['title', 'content']);
// 定义可以触发的事件
const emits = defineEmits(['update:title', 'update:content']);const updateTitle = (newTitle) => {emits('update:title', newTitle);
};const updateContent = (newContent) => {emits('update:content', newContent);
};
</script>

通过以上方式，就能在子组件中使用 v-model 实现数据的双向绑定，无论是 Vue 2 还是 Vue 3 都能根据具体需求灵活运用。