vue3 组件事件的变化

我们还可以用原本 vue 2 的方式来进行组件事件的触发；

<!-- MyComponent -->
<button @click="$emit('someEvent', true)">click me</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent', { a： 1 })
    }
  }
}

另外，在 vue3 中加上了对于事件的声明和验证。

export default {
  emits: ['inFocus', 'submit']
}

// 进行校验
export default {
  emits: {
    // 没有校验
    click: null,

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