記得前幾天剛接觸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

好了，明天見！嘻嘻