对组件中的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/>

我的理解大致是这样子的，如果有什么不对的地方，还望指正，谢谢。