如何理解vue自定义中的v-model

1. 看到v-model，就会想到数据的双向绑定，最常用的场景通常是在表单元素<input>,<textarea>,<select>中的使用，在一些自定义组件中也使用到了v-model.首先我们来看一个input输入框与v-model的例子。

<template>
<div>
    <input v-model="value" type="text">
    <hr>
    {{value}}
</div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'hello world'
            }
           }
          }
</script>

当我们在输入框输入一些内容时，就会修改data中的value，那么v-model到底做了什么了呢，它做了两件事。首先他将data中的value赋值给输入框的value，即 <input :value="value" type="text">然后当在输入框输入信息时，将当前输入框的内容传给data中的value<input :value="value" @input="value=$event.target.value" type="text"> 所以v-model 就是上面代码的语法糖。 2. v-model的用法，我们已经理解，那么自定义组件中来使用v-model也是十分简单的，首先我们新建一个组件Myinput.vue.里面内容如下

<template>
  <div>
    <input :value="value" @input="onInput"
           type="text">
  </div>
</template>

<script>
  export default {
    name: 'Myinput',
    props: ['value'],
    methods: {
      onInput(e) {
        const value = e.target.value
        this.$emit('input',value)
      }
    }
  }

</script>

然后父组件的内容为

<template>
  <div id="app">
    <myinput  :value='value' @input=""value=$event" ></myinput>
    <hr>
    <div>
      {{value}}
    </div>
  </div>
</template>
<script >
  import Myinput from '@/components/Myinput'
  export default{
    name:'App',
    data() {
      return {
        value: 'hello'
      }
    },
    components: {
      Myinput
    }
  }
</script>

当子组件Myinput输入内容触发input事件，然后将事件信息传递给父组件，父组件接收到触发信息就更改数据的value值了，直接将<myinput :value='value' @input=""value=$event" ></myinput>简写为<myinput v-model="value" ></myinput>