vue 中的 v-model 双向数据绑定 实现原理，实现v-m

1. input 的 v-model 语法糖

首先我们需要了解v-model的原理

<template>
  <div id="test">
    ## 使用v-model 将input 的值与official绑定，实现了双向数据绑定
    <input type="text" v-model="official" />

    ## 下面是v-model的原理，基于 v-bind 和 v-on 封装的语法糖,$event.target获取事件源，实现了双向数据
    <input type="text" v-bind="custom" v-on:input="custom = $event.target.value" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      official: "",
      custom: ""
    };
  }
};
</script>

2.v-model绑定自定义组件

有时候我要需要暴露出组件内的值，使用v-model是最简易的方法

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突
关于Prop可以查看这篇文章 https://www.jianshu.com/p/67f2de4f47bf

## 子组件内
<template>
  <div>
    <el-input v-model="input" @input="search" placeholder="请输入内容"></el-input> //绑定 input 事件 checked 和 
  </div>
</template>

<script>
export default {
  name:"searchInput",
  data() {
    return {input: ""}},
    model: {
      prop: "value",
      event: "change"
    },
    props: {
      value: { //value 和 model内prop的值一致
        type: String,
        default: ""
      }
    },
    methods: {
      search(event) {
        this.$emit('change',event) //事件名和model内event的值一致
      }
    }
};
</script>

##父组件内
<search-input v-model="getValue"><search-input> //getValue的值将会传入子组件名为 value的 prop

【有收获请点个赞哦~~】