在 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 都能根据具体需求灵活运用。
