Vue 中如何在输入框和数据属性之间实现双向数据绑定？

在 Vue 中，可以使用 v-model 指令来实现输入框和数据属性之间的双向数据绑定。

1. 基本用法：

v-model 指令可以直接用在表单元素上，比如 <input>、<textarea>、<select> 等，将输入框的值和 Vue 实例中的数据属性进行双向绑定。

<template>
  <input v-model="message" placeholder="Enter message">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: '' // Vue 实例中的数据属性
    };
  }
}
</script>

在这个例子中，v-model="message" 将 <input> 元素和 Vue 实例中的 message 数据属性进行了双向绑定。输入框中的值改变会同步更新到 message 属性，同时修改 message 属性的值也会反映到输入框中。

2. 自定义组件上使用 v-model：

如果你在自定义组件上使用 v-model，需要在组件内部合理地处理 value 和 input 事件。Vue 会根据 value 属性和 input 事件自动生成对应的双向绑定。

<template>
  <custom-input v-model="customValue"></custom-input>
</template>

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

在自定义组件中：

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

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

这样，你可以在自定义组件上使用 v-model，Vue 会根据你的定义自动生成双向绑定。

v-model 是 Vue 中用来处理表单元素和数据属性之间双向绑定的便捷方式，能够快速建立输入元素与数据属性之间的联系。