對組件中的v-model的理解

1.作用：
v-model用於父子組件之間相互通信的一種方法 ,如果用傳統的通過在子組件中的this.$emit通知父組件去$on去監聽這個事件會很麻煩，v-model相對於更便捷一些

2.使用：
我們想在子組件中更改checked屬性並且通知父組件中checked發生改變，我們可以將{{checked}}展示在頁面中
父組件

<template>
  <div class="hello">
    <child v-model="checked"></child>
    {{checked}}
  </div>
</template>

<script>
import Child from '@/components/child'
export default {
  data () {
    return {
      checked: true
    }
  },
  components: {
    Child
  }
}
</script>

<style scoped>

</style>

子組件
第一步在子組件中用model屬性去自定義我們通過v-model接收的屬性名和$emit傳遞的事件，然後用props接收checked,最後點擊按鈕就會發現父組件中checked改變了

<template>
  <div class="hello">
    <button @click="click">點擊</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
   model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  methods: {
    click() {
      this.$emit('change',true)
    }
  }
}
</script>

3.理解：
我個人喜歡先實操一遍然後再去理解，這樣理解起來會更容易一些，所以我把理解放在最後。
父組件中v-model可以這樣理解

<child v-model="checkd"><child/>

默認的情況下它相當於這樣子的

<child :value="checkd" @input="checked = $event"><child/>

但是我們在子組件中用v-model規定了prop類型和事件之後，就相當於

<child :check="checkd" @change="checked = 子組件傳過來的值"><child/>

我的理解大致是這樣子的，如果有什麼不對的地方，還望指正，謝謝。