vue2 自定义组件 v-model

### 创建支持 `v-model` 的自定义组件

在 Vue 2 中，通过使用 `value` 属性和 `$emit('input', newValue)` 方法可以在父级和子级组件之间实现双向数据绑定。这使得可以轻松地将 `v-model` 应用于任何自定义组件。

#### 基本输入组件示例

下面是一个名为 `BasicInput.vue` 的单文件组件的例子：

<template>
  <div class="basic-input">
    <!-- 使用 :value 绑定 prop 并监听 @input 事件 -->
    <input 
      type="text"
      :value="value" 
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: 'BasicInput',
  props: ['value'] // 接收来自父组件的数据作为prop
}
</script>

<style scoped>
/* 添加一些样式 */
.basic-input { margin-bottom: 1rem; }
</style>

此代码片段展示了如何创建一个简单的文本框组件并使其能够响应外部状态变化[^3]。

当用户修改 `<input>` 字段的内容时，会触发 `@input` 事件处理器，并调用 `$emit()` 函数通知父组件更新其内部的状态变量。这样就实现了从视图到模型的方向同步；而另一方面，如果父组件中的相应属性发生变化，则新的值会被传递给子组件并通过 `props` 更新显示内容，从而完成另一方向上的同步过程[^2]。

为了使该组件能被其他地方方便地使用，在父组件里只需要像下面这样做即可：

<!-- ParentComponent.vue -->
<template>
  <div id="app">
    <p>Parent message: {{message}}</p>
    
    <!-- 将 v-model 直接应用于此处 -->
    <basic-input v-model="message"></basic-input>
  </div>
</template>

<script>
import BasicInput from './components/BasicInput'

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

在这个例子中，每当 `message` 变量发生改变时，这些更改都会自动反映到 `BasicInput` 子组件上，反之亦然。因此达到了预期的效果——即让开发者能够在不关心具体细节的情况下享受便捷高效的表单项管理方式[^1]。