记得前几天刚接触vue.js，在官网的起步中看到一个示例

 当时觉得很神奇，这个如果用js代码自己写代码量肯定是不会少的，当时想着这个东西应该可以用在很多地 方但是我却并没有想去看一下他到底是如何实现的，但是今天我在用自定义组件做表单组件时使用v-model时出现了一些问题，于是乎去官网看了下文档（hhh可能是我脑子转不过来，看了官网的文档我还是有一些不太理解于是去百度了很多的资料），下面就是我对v-model的理解

我们应该都知道v-model实现了视图层与Vue中的data中model的数据双向绑定，那么他究竟是如何实现的呢？看图:,其实v-model本质上是语法糖，这里其实就可以看出一些东西了。

下面是代码演示:

父组件
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--<router-view/>-->
    <car v-model="index"></car>
    <div>{{index}}</div>
  </div>
</template>

<script>
import Car  from "./car.vue"
export default {
  data(){
    return{
      index:0
    }
  },
  name: 'App',
  components:{Car}
}
</script>

子组件
<template>
  <div @click="$emit('input',value+1)">糖果</div>
</template>
<script>
  export default{
    props:["value"]
  }
</script>

组件通过pros属性接受它的父级的数据，那么当前这个组件就是相对的子组件了，提供数据的就是父组件了。

它的原理是通过v-bind把父组件的数据绑定到子组件中props属性中，通过监听事件触发$emit,而触发的事件是input,子组件绑定了事件input相当于

< input @input=”??”>

触发父控件的input，而出发这个监听事件可以进行传值，相当于这一行代码

v-on:input=”searchText = $event”

由两个单向绑定组成的双向绑定数据(这里有我看到过写的很不错的讲解附上地址:https://blog.csdn.net/u010320804/article/details/79486034 https://blog.csdn.net/yemuxia_sinian/article/details/80534296)

好了，明天见！嘻嘻