vue自定义组件：使用v-model定制prop和event

在封装一个时间组件时，在使用v-model的时候，定制了prop和event，因为默认情况下，一个组件上的v-model会把value用作prop、把input用作event，但是在我自定义的组件里，需求的与默认情况不符。因此需要配置子组件接收的 prop 名称，以及派发的事件名称需（即定制prop和event）来使用v-model。

一、v-model本质上就是一个语法糖，简单理解代码：

<input v-model="test">

本质上是：

<input :value="test" @input="test = $event.target.value">

@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input。

v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。既可以支持原生表单元素，也可以支持自定义组件。在组件的实现中，我们是可以。

二、如何使用？

1、在自定义组件内的click事件里面，向父组件传值，自定义函数为change。

      

2、自定义prop和event，props中使用自定义参数`selectedDate`代替`value`。

3、在父组件使用自定义组件，绑定v-model值。

                  

  <YearSeason v-model="date"></YearSeason>

此代码块相当于：

 <YearSeason
    :selectedDate="date"
    @change="val => {date = val}"
 ></YearSeason>

通过这个代码块梳理一遍就得知：子组件向父组件传递参数并自定义一个为change的函数，并在父组件接收子组件参数并传递给子组件，   

需要注意的是：！！！！！一个子组件实现双向绑定的操作，v-on：change(语法糖为@change)触发的change事件是由父组件来接收的，子组件本身不会接收到这个事件。再通过父子组件传值中的最普遍的 v-bind、props方法，将父组件中接收的change事件以及值再传递给子组件。

以上传值的过程，通过定制的prop和event使用v-model