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

8 min read

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

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

验证抛出的事件

  • 使用对象语法

  • 为事件分配一个函数,该函数接收传递给 $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: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})