vue自定义组件中的v-model解析

在vue项目的开发中，我们肯定用到了很多第三方的组件，我们使用这些组件的input时，通常是直接使用v-model进行双向的数据绑定，但是如果是我们自己来实现一个input组件的话，想达到通过v-model直接双向绑定的效果，就要进行一些适配了

官方的文档上有提到过这样的一句话
可以看到组件上的v-model实际上是vue提供给我们的语法糖，而其本质实质上是这样的

  <!-- 这其实是语法糖 -->
  <my-input v-model='name'></my-input>
  <!-- 它的本质是这样的 -->
  <my-input :value='name' @input='val=>{name=val}'></my-input>

既然是这样，那我们在封装组件的时候，自然就需要做一些适配了

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
};
</script>

这样就可以使组件在被使用到的时候可以通过v-model进行双向数据绑定了
但如果我们不想使用value和input，比如这时候我们做的是一个单选框，那么我们可以通过组件内部的一个model选项来进行配置

<template>
  <div>
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    />
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checked: Boolean,
  },
};
</script>

这样，我们的组件在使用v-model的时候就变成了这样

  <!-- 这其实是语法糖 -->
  <my-input v-model='selected'></my-input>
  <!-- 它的本质是这样的 -->
  <my-input :checked='selected' @change='val=>{selected=val}'></my-input>

通过v-model语法糖绑定的prop和事件都变成了我们设置的值

总结一下
1.自定义组件的v-model其实并不是真正的v-model，而是vue提供给我们的语法糖，本质是通过v-bind设置属性和v-on绑定一个事件来动态的改变这个属性来实现的
2.我们在组件中要使用一个prop来接受这个prop，然后通过$emit触发对应的事件
3.自定义组件的v-model默认使用value这个prop和input这个事件
4.可以通过组件内部的model属性来设置prop和event来改变他的默认值