Vue中的双向数据绑定v-model的实现原理

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

数据双向绑定？

      Vue中使用v-model可以实现表单元素和数据之间的双向绑定，即修改表单的值，data中对应变量的值也会被修改。在data对应变量中修改值，被绑定的表单值也会被修改；所以称之为双向绑定。但是为什么这个指令就可以实现数据的双向绑定呢？其实v-model是vue的一个语法糖。即利用v-model绑定数据后，既绑定了数据，又添加了一个input事件监听。

实现原理：

• v-bind绑定响应数据
• 触发input事件并传递数据

模拟一个表单的v-model

 <!-- 原生DOM当中是有oninput事件：当表单元素发生文本的变化的时候就会立即触发 -->
<input type="text":value="msg" @input="msg = $event.target.value">
<span>{{msg}}</span>

<!-- 等同于下面 -->
<input type="text" v-model="msg">



<script type="text/ecmascript-6">
  export default {
    data() {
      return {
         msg:"我爱紫陌"
      }
    },
  }
</script>

原生DOM当中是有oninput事件，他经常是结合表单元素一起使用，当表单元素文本内容发生变化的时候就会发出一次回调

Vue2：可以通过value和input事件实现v-model功能

深入学习v-model：实现父子组件数据同步

模拟一个组件上的v-model

组件上使用v-model可以实现父子通信

父组件：

<template>
<div>
<!-- :value这可是props，父子组件通信
     @input这可不是原生DOM的input事件，这里属于自定义事件
 -->
<CustomInput :value="msg" oninput="msg = $event"></CustomInput> 
 <!-- 等同于下面 -->
<CustomInput v-model="msg"></CustomInput>
    <hr>
    <input type="text" :value="msg" @input="msg = $event.target.value">
  </div> 
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    data() {
      return {
         msg:"我爱紫陌"
      }
    },
    components: {
      CustomInput
    }
  }
</script>

子组件：

<template>
  <div>
    <h2>{{value}}</h2>
    <input :value="value"  @input="$emit('input',$event.target.value)"/>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'CustomInput',
    props:['value']
  }
</script>

这样的话就可以在父组件改msg数据子组件也会跟着改数据，反而言之，子组件input数据也影响父组件数据，实现父子组件数据双向绑定。