在vue中使用v-model实现数据双向绑定

用v-model实现数据的双向绑定，主要用于父子组件中，其中可作用于表单元素，如input、textarea、select。

1.v-model实现原理

v-model其实是语法糖，把背后两个操作合并为一个指令

 <input type="text" v-model="value">
 <!-- 等同于 -->
 <input type="text" :value="value" @input="value =$event.target.value">

2.在父子组件中实现数据的双向绑定

父组件

<template>
 <div class="Home">
   <v-model v-model="value" ></v-model>
    <!-- 等同于 -->
   <!-- <v-model :value="value" @input="value =$event.target.value"></v-model> -->
   <div>{{value}}</div>
 </div>
</template>

子组件

<template>
  <div class="VMoldel">
    <input :value="value" @input="onInput" />
  </div>
</template>

<script>
export default {
  name: 'VMoldel',
  props: {
    value: String
  },
  methods: {
    onInput (e) { //调用父组件的input方法。
      this.$emit('input', e.target.value)
    }
  },
}
</script>

3.使用model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

不修改父组件，在子组件中使用model

<template>
  <div class="VMoldel">
    <input :value="changeValue" @change="onChange" />
    <button>添加</button>
  </div>
</template>

<script>
export default {
  name: 'VMoldel',
  props: {
    changeValue: String
  },
  model: { //props和event可任意修改，元素input的change和input方法的区别只在于组件
    props: 'changeValue',
    event: 'change'
  },
  methods: {
    onChange (e) { //调用父组件的change方法。
      this.$emit('change', e.target.value)
    }
  },
}
</script>

4.结语

真正的使用双向绑定会给维护带来一定的困难，所以推荐使用 .sync修饰符，可查看使用方法。