Vue.js emits用法及代码示例

声明组件发出的自定义事件。

类型

interface ComponentOptions {
  emits?: ArrayEmitsOptions | ObjectEmitsOptions
}

type ArrayEmitsOptions = string[]

type ObjectEmitsOptions = { [key: string]: EmitValidator | null }

type EmitValidator = (...args: unknown[]) => boolean

细节

发出的事件可以以两种形式声明：

使用字符串数组的简单形式
使用对象的完整形式，其中每个属性键是事件的名称，值是null 或验证器函数。

验证函数将接收传递给组件的$emit 调用的附加参数。例如，如果调用 this.$emit('foo', 1)，则 foo 的相应验证器将收到参数 1 。验证器函数应返回一个布尔值以指示事件参数是否有效。

请注意，emits 选项会影响组件接收的哪些事件侦听器被视为组件事件侦听器与原生 DOM 事件侦听器。已声明事件的侦听器不会添加到组件的根元素中，并且将从组件的$attrs 对象中删除。有关详细信息，请参阅Fallthrough Attributes。

示例

数组语法：

export default {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
}

对象语法：

export default {
  emits: {
    // no validation
    click: null,

    // with validation
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
}

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 emits。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。