使用场景
所谓的组件中使用v-model就是当我们使用某个组件的时候，该组件内的某个表单需要与父组件内的某个响应式变量双向绑定，明白这个使用场景，接下来就好理解了
普通表单的v-model
前面我们在input中可以使用v-model来完成双向绑定，这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事；
v-bind:value的数据绑定和@input的事件监听：
<input type="text" v-model="message />
相当于:
<input
type="text"
:value="message"
@input="message = $event.target.value"
/>
组件的v-model
如果我们现在封装了一个组件，在其他地方使用这个组件的时候，该组件内的某个表单元素要和父组件内的某个响应式变量实现双向绑定
是否也可以使用v-model来完成这个功能呢？
例如：Home组件内有一个input表单元素，而App组件内有一个响应式变量message，
现在要实现Home组件内的这个表单元素和App组件内的message双向绑定:
既然要将message与表单元素绑定，那么App组件必须要将message传递到Home，之后让表单的value属性等于message的值，这样就是实现表单的value值跟随message变化的单向绑定，那么home组件内就需要用到props来接收message
在这之后要让表单的value值变更的同时，home内的message也同时发生变化，这就需要监听input表单的input事件，之后在input事件处理程序中发送名为input的自定义事件，同时将事件对象传递出来，之后利用事件对象让message的值始终和input的value值相等，至此双向绑定完成。
