在封装一个时间组件时,在使用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

 

Logo

前往低代码交流专区

更多推荐