vue3.0--自定义事件

一、定义自定义事件

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

app.component('custom-form', {
    
 emits: ['in-focus', 'submit']
})

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

二、验证抛出的事件

• 与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以验证它。
• 要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。

app.component('custom-form', {
    
 emits: {
    
   // 没有验证
   click: null,

   // 验证submit 事件
   submit: ({
     email, password }) => {
    
     if (email && password) {
    
       return true
     } else {
    
       console.warn('Invalid submit event payload!')
       return false
     }
   }
 },
 methods: