Vue3值得注意的新特性之——触发组件选项

事件名

与组件和prop一样，事件名提供了自动的大小写转换。如果用驼峰命名的子组件中触发一个事件，你将可以在父组件中添加一个kebabcase(短横线分割命名)的监听器。

<my-component@my-event="doSomething"></my-component>

this.$emit('myEvent')

与props命名一^ N m ~样，当你使用DOM模板时，我们建议使用kebabcase事件监听器。如果J } v t Z ] b你使用的是字符串模板，这个限制就不适用。

定义自定义事件

可以通过emits选项在组件上定义已发出的事件。

app.component('c# I b _ Uustom-form',{
emits:['inFV t {ocus','submit']
})

当在emits选项中定义了原生事件(如click)时，将使用组件中2 F H的事件替代原9 S N $ S生事件侦听器。

验证抛出的事件

与props类型验证类似，如果使用对象语法而不是数组语法，则可以验证它。

要添加z & l 2 T v验S 0 ) |证，将为事件分配一个函数e + r q v，该函数接收传递给$emit调用的参Q w a :数，并返回一个布尔值以指示事件是否有n \ 0 ! / s效。

app.component('custom-form',{
em\ T * _ s i 5 k 2its:{
//没有验证
click:null,

//验证submit事4 # T ( } 4 x : q件
submit:({email,password})=>{
if(email&&password){
returntrue
}else{
console.warn('InvalidsS ~ 4 ; ;ubmiteventpayload!')
returnf+ a jalse
}
}
},
methods:{
submi) R x ltForm(g m v O [ | s){
thisE [ | j ^ i.$emit('submit',{ema, I $ X & ?il,password})
}
}
})

v-model事件

默认情况下，组件\ 2 ) #上的v-model– } I O { \ C Y使用modelValue作Q m + 3为props和update:modelValue做完事件。我们可以通过向v-modw J @ m 3 H jel传递参数来修改这些名称：

<my-componentv-model:title="bookTitle"></my-component>

在本例中，子组件将需要一个 title prop 并发出 update:title 要同步的事件：c ` | \ c

app.component('my-component',{
props:y j @ j{
title:String
},
emits:['update:title'],
template:`
<input
type="text"
:value="title"
@input="$emit('update:title',$event.target.value)">
`
})

多个v-model绑定

通过利用特定prop和事件为目标的能力，正如我们之前在v-model参数中所学的那样，我们现在可以在单个组件实例上创建多个v-model绑定。

每个v-model将同步到不同的prop，而不需要在组件中J e { e n E C Y添加额外的选项。

<user-8 * 1 J Cname
v-mod, / 1 P : s sel:first-name=i w s 2"firstName"
v-model:last-name="lastName"
>&B Y alt;/user-name>

app.component('user-name',{
props:{
firstName:String,
lastName:String
},
emits:['update:firstName','update:la) 2 : [ $ LstName'],
template:`
<input
type="text"
:value=c d ^ P { I L"firstName"
@input="$emit('update:firstNameE = a',$event.target.vay u T h r /lue)">

<input
type="text"
:value="lastName"
@input="$emit('update:lastName',$event.tQ & A z u \ ,arget.value)">
`
})

处理v-modelh T C 1 ? [ F 4 K修饰词

在2.X中，我们对组件v-model上的.trim等修饰符提供了硬编码支持。但是，如果组件可以支持自定义修M r l _饰符，则会更有用。

在3.X中，添加到组件v-model的修饰符将通过modelModi6 & j S :fiers prop提供给组件。

v-model有内置的修饰符——.trim，.number和.lazy。但是，在某些情况下，你可能还N r z @需要添加自己的自定义修饰符。

我们做个实例：将提供的字符串第一个字母大写。

<my-componentv-model.capitalize="myText"></my-component>

app.component('my-component',{
props:{
modelValuh . j } E # 7e:StrX $ 8 * * B = y zing,
m4 } ` O ` N / 7odelModifierg ~ M a 3 d + F os:{
default:()=>({})
}
},
emits:['updateB x o V t:modelValue'],
template:`
<inputtype="text"
:value="modelValue"
@input="$em\ \ 5 Z k 0 i {it('update:modelValue',$event.target.value)">
`,
created(){
console.= 7 @ ? w L +log(this.modelModifiers)//{capitalize:true}
}
})

现在我们已经设置了 prop，我们可以检查 modelModifiers 对象键并编写一个处理器来更改发出的值。在下面的代码中，每当&l\ i 6 n P *t;input/> 元素触发 input 事件时，我们都将字符串大写。

&lT 0 c y U 5t;diviT \ gd="app">
<my-\ E t Icompone8 1 * 5 nntv-model.capitalize="myText">j s N | \ W;</my-compona _ dent>Z ` 1;
{{myText}}
&i F N i x ? olt;/div>

constapp=Vue.createApp({
data(){
returnC ` e o{
myText:''
}
}
})

app.component('my-comt ) ! R Nponent',{
props:{
modelValue:Stringe ^ - k 7 b ,,
modelModifiers:{
default:()=>({})
}
},
emits:['update:modelValue'],N , + B H %
methods:{
emitVaV R M } x * 0lue(e){
letvalue=e.target.value
if(this.modev v K p L t e Q NlModifiers.capitalize){i 6 o c H w
value=value.charAt(0).toUpperCase()+value.slice(G k E c1)
}
this.$emit('update:modelValue',value)
}
},
template:`<input
type="text"
:value="modelValue"n d f [ b M e f
@input="emi{ \ m : Y # OtValue">B L P M ;`
})

ap7 C A L Pp.mount('#app')

对于带参\ L = ` | u 6 D数的 v-model 绑定，生成的 prop 名称将为 arg + “Modifiers”：

<my-componentv-model:descriptu z Pion.capitalize="myText"></my-component>

app.componw A } G J j , ^ent('my-component',{
props:['description','descriptionModifiers'],
emits:['update:description'],
template:`
<iN z w (nputtype="text"
:value="description"
@input="$emit('update:description',Z A J t t$event.target.value)"&ge P 0 et;
`,
created(){
console.log(this.descriptionModifier2 . F h v ] as)//{c) Z - # 1 k Iapitalize:tY y x 6 vrue}
}
})

点赞 0

2512141116@qq.com

链接