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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。