Vue2迁移到Vue3：（三）绑定表单输入

在 Vue 2 和 Vue 3 中，v-model 的使用方式有一些更新。

一、Vue2

在 Vue 2 中，v-model 可以用于双向绑定表单元素的值和组件的值。

对于原生的表单元素（如 <input>、<select> 和 <textarea>），v-model 会自动监听 input 或 change 事件，并更新绑定的数据。

对于自定义组件，可以通过在组件中定义 model 选项来自定义 v-model 的行为。

示例代码（Vue 2）：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

二、Vue3

在 Vue 3 中，v-model 的使用方式有所变化。

现在，v-model 默认情况下只是一个语法糖，它会根据元素类型自动选择合适的事件和属性进行绑定。

对于原生的表单元素，v-model 会监听 input 事件和更新 value 属性。对于自定义组件，可以通过在组件中使用 emits 选项来自定义 v-model 的行为。

示例代码（Vue 3）：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('');

    return {
      message
    };
  }
};
</script>

请注意，我们使用了 ref 来创建响应式的数据，并且在 setup 函数中返回了 message。

这是因为组合式 API，需要使用 setup 来定义组件的逻辑和响应式数据。

总结：Vue 3 中的 v-model 使用方式与 Vue 2 类似，但在自定义组件的使用上有一些变化。