文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 05:29

关注
  1. "doSomething" 
  2. this.$emit('myEvent'

与props命名一样,当你使用DOM模板时,我们建议使用kebabcase事件监听器。如果你使用的是字符串模板,这个限制就不适用。

定义自定义事件

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

  1. app.component('custom-form', { 
  2.   emits: ['inFocus''submit'
  3. }) 

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

验证抛出的事件

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

要添加验证,将为事件分配一个函数,该函数接收传递给$emit调用的参数,并返回一个布尔值以指示事件是否有效。 

  1. app.component('custom-form', { 
  2.   emits: { 
  3.     // 没有验证 
  4.     click: null
  5.  
  6.     // 验证submit 事件 
  7.     submit: ({ email, password }) => { 
  8.       if (email && password) { 
  9.         return true 
  10.       } else { 
  11.         console.warn('Invalid submit event payload!'
  12.         return false 
  13.       } 
  14.     } 
  15.   }, 
  16.   methods: { 
  17.     submitForm() { 
  18.       this.$emit('submit', { email, password }) 
  19.     } 
  20.   } 
  21. }) 

v-model事件

默认情况下,组件上的v-model使用modelValue作为props和update:modelValue做完事件。我们可以通过向v-model传递参数来修改这些名称:

  1. "bookTitle"

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

  1. app.component('my-component', { 
  2.   props: { 
  3.     title: String 
  4.   }, 
  5.   emits: ['update:title'], 
  6.   template: ` 
  7.     
  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,而不需要在组件中添加额外的选项。 

  1. <user-name 
  2.   v-model:first-name="firstName" 
  3.   v-model:last-name="lastName" 
  4. >user-name
  5.  
  6. app.component('user-name', { 
  7.   props: { 
  8.     firstName: String, 
  9.     lastName: String 
  10.   }, 
  11.   emits: ['update:firstName''update:lastName'], 
  12.   template: ` 
  13.     
  14.       type="text" 
  15.       :value="firstName" 
  16.       @input="$emit('update:firstName', $event.target.value)"
  17.  
  18.     
  19.       type="text" 
  20.       :value="lastName" 
  21.       @input="$emit('update:lastName', $event.target.value)"
  22.   ` 
  23. }) 

处理v-model修饰词

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

在3.X中,添加到组件v-model的修饰符将通过modelModifiers prop提供给组件。

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

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

  1. "myText"
  2.  
  3. app.component('my-component', { 
  4.   props: { 
  5.     modelValue: String, 
  6.     modelModifiers: { 
  7.       default: () => ({}) 
  8.     } 
  9.   }, 
  10.   emits: ['update:modelValue'], 
  11.   template: ` 
  12.     "text" 
  13.       :value="modelValue" 
  14.       @input="$emit('update:modelValue', $event.target.value)"
  15.   `, 
  16.   created() { 
  17.     console.log(this.modelModifiers) // { capitalize: true } 
  18.   } 
  19. }) 

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

  1. "app"
  2.   "myText"
  3.   {{ myText }} 
 
  •  
  • const app = Vue.createApp({ 
  •   data() { 
  •     return { 
  •       myText: '' 
  •     } 
  •   } 
  • }) 
  •  
  • app.component('my-component', { 
  •   props: { 
  •     modelValue: String, 
  •     modelModifiers: { 
  •       default: () => ({}) 
  •     } 
  •   }, 
  •   emits: ['update:modelValue'], 
  •   methods: { 
  •     emitValue(e) { 
  •       let value = e.target.value 
  •       if (this.modelModifiers.capitalize) { 
  •         value = value.charAt(0).toUpperCase() + value.slice(1) 
  •       } 
  •       this.$emit('update:modelValue', value) 
  •     } 
  •   }, 
  •   template: `
  •     type="text" 
  •     :value="modelValue" 
  •     @input="emitValue">` 
  • }) 
  •  
  • app.mount('#app'
  • 对于带参数的 v-model 绑定,生成的 prop 名称将为 arg + "Modifiers": 

    1. "myText"
    2.  
    3. app.component('my-component', { 
    4.   props: ['description''descriptionModifiers'], 
    5.   emits: ['update:description'], 
    6.   template: ` 
    7.     "text" 
    8.       :value="description" 
    9.       @input="$emit('update:description', $event.target.value)"
    10.   `, 
    11.   created() { 
    12.     console.log(this.descriptionModifiers) // { capitalize: true } 
    13.   } 
    14. }) 

     

     

    来源:今日头条内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯