Web开发之v-model和model-value区别

v-model 和 model-value 是在处理表单数据绑定时使用的不同概念，它们分别服务于不同的目的和场景。

1、v-model

用于实现组件内部的双向数据绑定，特别适用于表单元素和支持双向绑定的自定义组件。语法简洁，可以直接在组件模板中使用，实现用户输入和数据属性的双向同步。

1.1、组件内部双向绑定

v-model在组件内使用，实现自己组件内部表单元素与数据的双向绑定，当在表单元素（如 <input>、<textarea>、<select> 等）或支持双向绑定的自定义组件上使用 v-model 时，它会自动同步元素的值与相应 Vue 实例的数据属性。用户在表单元素中输入时，数据属性会被更新；反之，如果数据属性发生变化，表单元素的显示值也会相应更新。

1.2、v-model语法

v-model 实际上是 v-bind 和 v-on 的语法糖，它简化了对表单元素值的绑定和监听。例如，<input v-model="message"> 相当于 <input :value="message" @input="message = $event.target.value">。

1.3、v-model代码实例

示例中的代码实现了一个简单的输入框与数据属性的双向绑定，用户在输入框中输入内容时，数据属性会自动更新，反之亦然。

<template>
  <input v-model="inputValue" />
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');
</script>

使用了 Vue 3 的 ref 来创建一个响应式变量 inputValue，然后在模板中使用了 v-model 来将输入框的值与 inputValue 双向绑定。当用户在输入框中输入内容时，inputValue 的值会自动更新，同时当你在代码中更新 inputValue 的值时，输入框中的内容也会相应地更新。

2、 model-value

用于实现组件间的双向数据绑定，主要用于自定义组件与 v-model 之间的绑定

2.1、组件之间通信（组件间数据双向绑定）

model-value（通常写作 modelValue）是 Vue 3 中为了实现自定义组件与 v-model 之间清晰、灵活的双向绑定而引入的一个约定俗成的 prop 名称。主要出现在 Vue.js 自定义组件的上下文中，特别是在 Vue 3 中，它是实现自定义组件与外部进行表单数据双向绑定的一种方式。

需要注意的是 ，v-model-value 指令本身并不是 Vue.js 的内置指令，而是开发者约定的一种用法，通常需要在子组件中对 modelValue 进行声明和处理，以实现双向数据绑定。

2.2、model-value语法

父组件则通过 v-model 在自定义组件上绑定相应的数据属性（用于自己组内绑定修改值，也用来传递给子组件数据）。

自定义子组件需要定义一个名为 modelValue（注意大小写）的 prop 接收父组件传递的初始值，并在组件内部通过 $emit('update:modelValue', newValue) 触发一个特定事件来通知父组件更新值。

2.3、model-value代码实例

示例中的代码展示了一个父组件和子组件之间通过 model-value 实现双向数据绑定的过程，子组件中的输入框值的变化会同步到父组件中，反之亦然。

父组件：

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>Parent Component</p>
    <CustomInput v-model="parentValue" />
    <p>Parent Value: {{ parentValue }}</p>
  </div>
</template>

<script setup>
import CustomInput from './CustomInput.vue';
import { ref } from 'vue';

const parentValue = ref('');
</script>

子组件：

<!-- CustomInput.vue -->
<template>
  <input :value="modelValue" @input="updateValue($event.target.value)" />
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});

const emit = defineEmits();

const updateValue = (newValue) => {
  emit('update:modelValue', newValue);
};
</script>

在这个例子中，ParentComponent.vue 中的 <CustomInput v-model="parentValue" /> 中的 v-model 将 parentValue 绑定到了 CustomInput 组件的 modelValue 上。子组件 CustomInput.vue 中的 modelValue 接收了父组件传递的值，并且当输入框的值发生变化时，通过 $emit('update:modelValue', newValue) 事件通知父组件更新值。

这样，通过 model-value，实现了父组件和子组件之间的双向数据绑定。

3、总结

• v-model 适用于组件内部的双向数据绑定，简化了表单元素与数据属性之间的同步。
• model-value 适用于组件间的双向数据绑定，用于自定义组件与 v-model 之间的清晰、灵活的绑定。
• 虽然在功能上有所区别，但在实现双向数据绑定方面，两者都能有效地处理数据流动。

通过了解和运用 v-model 和 model-value，能够更灵活地处理 Vue.js 中的数据绑定，提高组件间的通信和数据流的处理效率。