vue中你真的理解v-modle基础理解和使用吗?

model 语法糖

tips：v-model 是一个vue指令限制使用在input select textarea components 中使用

一、原理的大致理解

二、在自建组件中的使用

原理的大致理解

v-model 本身是一个语法糖， 可以笼统的理解为，在vue编译执行的时候 看到v-model 之后， 自动添加 绑定事件 和 监听事件。
以下代码为例：

// An highlighted block
<template>
  <input type="text" v-bind="msg">
  </input>
</template>

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

编译之后的代码：

<template>
  <input type="text"
         v-bind:value="msg"
         v-on:input="msg=$event.target.value">
  </input>
</template>

<script>
export default {
  data() {
    return {
      msg: ""
    };
  }
};

有过一定基础的小伙伴可以看到， input 中绑定了input的value 属性 和 监听了input的输入事件。 并且执行了msg = $event.target.value; 这个方法。

在自建组件中的使用

创建组件代码

et Child = {
  template: `<div> 
              <input :value="value" @input="updateValue" placeholder="edit me"/>
            </div>`,
  props: ['value'],
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value);  // 这里使用到子组件向父组件传值的方法
    }
  },
}
let vm = new Vue({
  el: '#app',
  template: `<div>
  <child v-modle="msg"></child>
  <p> {{msg}}<p>
  </div>`,
  data() {
    return {
      msg: '',
    }
  },
  components: {
    Child
  }
})

Vue 编译之后的代码， 主要是父级发生变化

let vm = new Vue({
  el: '#app',
  template: `<div>
  <child v-bind:value="msg" @input="msg = argumrnts[0]"></child>
  <p> {{msg}}<p>
  </div>`,
  data() {
    return {
      msg: '',
    }
  },
  components: {
    Child
  }
})

这里代码，子组件传递的value 与 父组件 的msg 绑定, 子组件中会通过事件 将值传递给父组件。
这里就有了典型的父子组件通信。 父组件通过props绑定 把 msg值 传递给子组件 value 接受，子组件中 input 输入事件触发 $emit事件派发给父组件。
父组件中绑定的事件 接收到 子组件的传递的值。实现了，数据双向绑定。