组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。

按照Vue官网介绍，Vue的双向绑定是一种语法糖。本质上是 “负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。”

等价于：

为什么说上述的原始写法只针对于input 的text呢？ vue官网解释如下：

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

以下实例自定义组件 runoob-input, 父组件的 num 的初始值为100，更改子组件的值能实时更新父组件的 num：

$event 指代当前触发的事件对象; $event.target 指代当前触发的事件对象的dom; $event.target.value 就是当前dom的value值;

由于 v-model 默认传入的是 value，不是 checked，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。（也就是给组件添加自定义事件的双向绑定）

实例中 lovingVue 的值会传给 checked 的 prop，同时当 触发 change 事件时， lovingVue 的值也会更新。

具体解析如下： 为了实现给组件添加自定义事件的双向绑定，我们需要为我们的组件增加一个model对象，并在model对象中告知vue框架本次双向绑定对应的属性和事件。

如下示例则是告知vue底层该组件监听checked属性的change事件。

给组件添加自定义事件的双向绑定的具体步骤如下：