vue input数据绑定

### Vue.js 中 `input` 元素的数据绑定

在 Vue.js 中，通过 `v-model` 指令可以在 `<input>` 元素和其他表单控件之间建立双向数据绑定。当用户修改输入框中的值时，关联的 JavaScript 变量会自动更新；反之亦然。

#### 基本用法

最简单的形式如下所示：

<!-- HTML -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

// JavaScript (Vue instance)
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

每当用户编辑输入字段的内容时，`message` 属性会被实时更新，并且页面上的显示也会随之改变[^1]。

#### 自定义组件内的实现

如果是在自定义组件内部想要支持类似的 `v-model` 行为，则需要遵循一定的约定来传递属性和事件。具体来说就是监听用户的输入并发出带有新值的 `input` 或者 `update:modelValue` 事件给父级组件[^2]。

例如，在子组件中这样写：

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

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

而在父组件里就可以像下面这么用了：

<MyInputComponent v-model="parentData"/>

这里假设有一个名为 `MyInputComponent` 的自定义组件，它能够接收来自外部传入的初始值并通过 `$emit()` 方法通知外界其当前状态发生了更改[^3]。

这种机制不仅限于字符串类型的文本框，还可以扩展到其他种类的选择器、多选框乃至更复杂的交互逻辑之上[^4]。