事件名

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

  1. <my-component@my-event="doSomething"></my-component>
  2. this.$emit('myEvent')

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

定义自定义事件

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

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

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

验证抛出的事件

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

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

  1. app.component('custom-form',{
  2. em\ T * _ s i 5 k 2its:{
  3. //没有验证
  4. click:null,
  5. //验证submit事4 # T ( } 4 x : q
  6. submit:({email,password})=>{
  7. if(email&&password){
  8. returntrue
  9. }else{
  10. console.warn('InvalidsS ~ 4 ; ;ubmiteventpayload!')
  11. returnf+ a jalse
  12. }
  13. }
  14. },
  15. methods:{
  16. submi) R x ltForm(g m v O [ | s){
  17. thisE [ | j ^ i.$emit('submit',{ema, I $ X & ?il,password})
  18. }
  19. }
  20. })

v-model事件

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

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

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

  1. app.component('my-component',{
  2. props:y j @ j{
  3. title:String
  4. },
  5. emits:['update:title'],
  6. template:`
  7. <input
  8. type="text"
  9. :value="title"
  10. @input="$emit('update:title',$event.target.value)">
  11. `
  12. })

多个v-model绑定

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

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

  1. <user-8 * 1 J Cname
  2. v-mod, / 1 P : s sel:first-name=i w s 2"firstName"
  3. v-model:last-name="lastName"
  4. >&B Y alt;/user-name>
  5. app.component('user-name',{
  6. props:{
  7. firstName:String,
  8. lastName:String
  9. },
  10. emits:['update:firstName','update:la) 2 : [ $ LstName'],
  11. template:`
  12. <input
  13. type="text"
  14. :value=c d ^ P { I L"firstName"
  15. @input="$emit('update:firstNameE = a',$event.target.vay u T h r /lue)">
  16. <input
  17. type="text"
  18. :value="lastName"
  19. @input="$emit('update:lastName',$event.tQ & A z u \ ,arget.value)">
  20. `
  21. })

处理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 @需要添加自己的自定义修饰符。

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

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

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

  1. &lT 0 c y U 5t;diviT \ gd="app">
  2. <my-\ E t Icompone8 1 * 5 nntv-model.capitalize="myText">j s N | \ W;</my-compona _ dent>Z ` 1;
  3. {{myText}}
  4. &i F N i x ? olt;/div>
  5. constapp=Vue.createApp({
  6. data(){
  7. returnC ` e o{
  8. myText:''
  9. }
  10. }
  11. })
  12. app.component('my-comt ) ! R Nponent',{
  13. props:{
  14. modelValue:Stringe ^ - k 7 b ,,
  15. modelModifiers:{
  16. default:()=>({})
  17. }
  18. },
  19. emits:['update:modelValue'],N , + B H %
  20. methods:{
  21. emitVaV R M } x * 0lue(e){
  22. letvalue=e.target.value
  23. if(this.modev v K p L t e Q NlModifiers.capitalize){i 6 o c H w
  24. value=value.charAt(0).toUpperCase()+value.slice(G k E c1)
  25. }
  26. this.$emit('update:modelValue',value)
  27. }
  28. },
  29. template:`<input
  30. type="text"
  31. :value="modelValue"n d f [ b M e f
  32. @input="emi{ \ m : Y # OtValue">B L P M ;`
  33. })
  34. ap7 C A L Pp.mount('#app')

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

  1. <my-componentv-model:descriptu z Pion.capitalize="myText"></my-component>
  2. app.componw A } G J j , ^ent('my-component',{
  3. props:['description','descriptionModifiers'],
  4. emits:['update:description'],
  5. template:`
  6. <iN z w (nputtype="text"
  7. :value="description"
  8. @input="$emit('update:description',Z A J t t$event.target.value)"&ge P 0 et;
  9. `,
  10. created(){
  11. console.log(this.descriptionModifier2 . F h v ] as)//{c) Z - # 1 k Iapitalize:tY y x 6 vrue}
  12. }
  13. })
【责任编辑:未丽燕 TEL:(010)68476606】

点赞 0

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注