# vue v-model指令

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

$v-model$的使用方法要看是在原生的表单中使用，还是在自定义的组件上使用。

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

可以使用$v-model$指令在表单$<input>$'$<textarea>$以及$<select>$元素上进行双向数据绑定，$v-model$会根据数据类型的不同自动更新。很神奇，不过因为$v-model$是一个语法糖，实际是利用事件监听用户输入的数据进行处理。

   -   text 和 textarea 元素使用 `value` 和 `input` 事件；
   -   checkbox 和 radio 使用 `checked` 和 `change` 事件； 
   -   select则是 `value` 和 `change` 事件

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

 <input v-model="msg" type="text"/> 

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

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

对于自定义的组件，你需要在组件内部定义一个prop接收父组件传过来的值prop里面必须是value，并在组件的模板中使用 v-bind 绑定该 prop 到内部的表单元素上，同时在表单元素上使用 v-on 监听 input 事件，并将输入的值通过 this.$emit('input', 想改变的值) 发送出去

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

  <template>
    <input :value="value" @input="updateValue($event.target.value)" type="text"> 
    </template> 
    <script>
      export default {
        props: ['value'],
        methods: { 
        updateValue(newValue) {
        this.$emit('input', newValue);
        } }

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

        <template> 
            <div>
              <component v-model="msg"></my-component>
                <div>你好: {{ msg }} </div>
            </div>   
         </template> 
            <script>
                import MyComponent from './MyComponent.vue'; 
                 export default {
                components: { 
                MyComponent 
                },
                data() {
                return { 
                msg: '' 
                    }; 
                   } 
                } 
        </script>

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