vue自定义组件:使用v-model定制prop和event
在封装一个时间组件时,在使用v-model的时候,定制了props和event,因为默认情况下,一个组件上的v-model会把value用作prop、把input用作event<input v-model="value" />
在封装一个时间组件时,在使用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
更多推荐
所有评论(0)