Vue 用v-model 来创建自定义的表单输入组件进行数据双向绑定

Vue.js 中的 `v-model` 是一种简洁的指令，用于创建双向数据绑定，它能自动将输入元素（如 `<input>`、`<textarea>` 或 `<select>` 等）的值与视图层（模板）上的变量关联起来，同时也更新数据模型。如果你想要创建自定义的表单输入组件，可以按照以下步骤操作：

1. **定义组件**：
首先，你需要创建一个自定义的 Vue 组件，比如一个名为 `CustomInput` 的组件，通常会有一个 `value` 数据属性来存储输入的值。

<template>
  <div>
    <input v-model="inputValue" type="text">
    <button @click="updateData">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    updateData() {
      // 这里处理数据更新逻辑
    },
  },
};
</script>

2. **使用 `v-model`**：
在组件模板中，通过 `v-model` 将用户输入绑定到 `inputValue` 变量上。当用户修改输入框的内容，`inputValue` 的值也会同步变化；反之，当你调用 `updateData` 方法改变 `inputValue`，视图也会实时更新。

3. **双向数据绑定**：
`v-model` 实现了数据的双向绑定，这意味着无论何时 `inputValue` 发生变化，都将在视图和组件的数据之间保持同步。