vue v-model指令

v-model 是 Vue.js 中的一个指令，用于实现表单元素和组件之间的双向数据绑定。通过使用 v-model，你可以在表单元素或自定义组件中实现数据的输入和输出的同步更新。

v-model 的使用方法取决于你是在原生的 HTML 表单元素上使用，还是在自定义的组件上使用。

在原生的 HTML 表单元素上使用 v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意： v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。`

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用 输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

例如，你可以通过以下方式使用 v-model 绑定一个输入框的值：

htmlCopy code
<input v-model="message" type="text">

上述代码将会将输入框的值与 Vue 实例中的 message 属性进行双向绑定。当你在输入框中输入内容时，message 属性的值也会自动更新；反之，如果你在 Vue 实例中更新了 message 属性的值，输入框中的内容也会同步更新。

在自定义组件上使用 v-model

对于自定义的组件，你需要在组件内部定义一个名为 value 的 prop，并在组件的模板中使用 v-bind 绑定该 prop 到内部的表单元素上，同时在表单元素上使用 v-on 监听 input 事件，并将输入的值通过 this.$emit('input', newValue) 发送出去。

以下是一个简单的示例，展示如何在自定义的组件中使用 v-model：

htmlCopy code
<!-- MyComponent.vue -->
<template>
  <input :value="value" @input="updateValue($event.target.value)" type="text">
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue);
    }
  }
}
</script>

在上述示例中，我们定义了一个名为 MyComponent 的组件，它接受一个名为 value 的 prop。在组件的模板中，我们使用 :value 将传入的 value prop 绑定到输入框的值上，同时使用 @input 监听输入事件，并调用 updateValue 方法来更新输入的值，并通过 this.$emit('input', newValue) 发送出去。

使用该组件时，你可以通过 v-model 来实现数据的双向绑定：

htmlCopy code
<template>
  <div>
    <my-component v-model="message"></my-component>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

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

在上述示例中，我们通过 <my-component v-model="message"></my-component> 将自定义组件 <my-component> 和 Vue 实例中的 message 属性进行了双向数据绑定。当你在 <my-component> 组件中输入内容时，message 属性的值会同步更新；反之，如果你在 Vue 实例中更新了 message 属性的值，<my-component> 组件中的输入框内容也会同步更新。

注意事项

在使用 v-model 进行双向绑定时，需要注意以下几点：

1. 对于自定义组件，v-model 实际上是语法糖，它会自动展开为一个 value 属性和一个 input 事件。因此，在自定义组件中，你需要显式地定义一个名为 value 的 prop 和一个名为 input 的事件。

2. 如果你在自定义组件中想要绑定一个不同的 prop 名称和事件名，可以使用 model 选项来自定义。例如，你可以通过以下方式自定义 v-model 的属性名和事件名：

   javascriptCopy code
   Vue.component('my-component', {
     model: {
       prop: 'customValue',
       event: 'update'
     },
     props: ['customValue'],
     methods: {
       updateInputValue(newValue) {
         this.$emit('update', newValue);
       }
     }
   });
   

   在上述示例中，v-model 将会绑定到名为 customValue 的 prop 和 update 事件上。

3. 当在自定义组件上使用 v-model 时，如果组件内部有多个输入控件，你需要手动处理每个控件的值和事件。可以通过给每个控件绑定不同的 value 和 input 来实现。

自定义实现 v-model 如果你想要自定义实现 v-model 的行为，可以使用 value 属性和 input 事件来实现类似的双向绑定功能。以下是一个示例，展示了如何自定义实现一个带有 v-model 功能的组件：

htmlCopy code
<!-- MyCustomModel.vue -->
<template>
  <div>
    <input :value="internalValue" @input="updateInternalValue($event.target.value)" type="text">
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    value(newValue) {
      this.internalValue = newValue;
    }
  },
  methods: {
    updateInternalValue(newValue) {
      this.internalValue = newValue;
      this.$emit('input', newValue);
    }
  }
}
</script>

在上述示例中，我们定义了一个名为 MyCustomModel 的组件。它接受一个名为 value 的 prop，并在组件的数据中定义了一个名为 internalValue 的属性，用于保存内部的值。在组件的模板中，我们将 internalValue 绑定到输入框的值上，并监听输入事件，调用 updateInternalValue 方法来更新内部的值，并通过 this.$emit('input', newValue) 发送出去。

使用该自定义组件时，你可以通过类似 v-model 的方式进行双向绑定：

htmlCopy code
<template>
  <div>
    <my-custom-model v-bind:value="message" v-on:input="message = $event"></my-custom-model>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
import MyCustomModel from './MyCustomModel.vue';

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

在上述示例中，我们通过 v-bind:value="message" 将 Vue 实例中的 message 属性传递给自定义组件的 value prop，并通过 v-on:input="message = $event" 监听 input 事件，并将事件的值赋给 message 属性，实现了自定义的双向绑定。

通过自定义实现 v-model，你可以灵活地控制双向绑定的逻辑，并适应更复杂的场景。