一：定义

1：vue2中的v-model

是一个语法糖，用于实现双向数据绑定

可以用于在组件中绑定表单元素的值，并将用户的输入同步到组件的数据属性中

组件必须具有value和input两个props，使用value和@input来实现

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

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

2：vue3中的v-model

不在是语法糖，是一个通用的指令，用于自定义组件上的双向绑定

使用modelValue和update:modelValue来作为props和事件来实现双向绑定

更灵活地控制绑定的值和更新机制

<template>
  <CustomInput v-model="message" />
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>


<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script>
export default {
  props: ['modelValue']
};
</script>

二：总结

1：Vue 2中的v-model是一个用于双向数据绑定的语法糖，

2：Vue 3中的v-model是一个更通用的指令，可以用于自定义组件上的双向绑定，需要手动定义modelValue的prop和update:modelValue的事件来实现绑定和更新