触发与监听事件

子组件使用 $emit 方法触发自定义事件。

示例：

<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>

父组件可以通过 v-on (缩写为 @) 来监听事件。

示例：

<MyComponent @some-event="callback" />

组件的事件监听器也支持 .once 修饰符：。

示例：

<MyComponent @some-event.once="callback" />

事件参数

子组件$emit 提供一个额外的参数。

示例：

<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

父组件中监听事件带参数。

1、内联的箭头函数作为监听器

示例：

<MyButton @increase-by="(n) => count  = n" />

2、使用组件方法来作为事件处理函数。

示例：

<MyButton @increase-by="increaseCount" />

function increaseCount(n) {
  count.value  = n
}

声明触发的事件

1、在 script setup 声明触发的事件

通过 defineEmits() 来声明它要触发的事件，并返回一个与$emit相同作用的函数。

示例：

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

2、在setup 函数声明触发的事件

通过 emits 选项来定义，emit 函数也被暴露在 setup() 的上下文对象上。

示例：

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

TypeScript用法

示例：

<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // 通过返回值为 `true` 还是为 `false` 来判断
    // 验证是否通过
  }
})
</script>

使用纯类型标注来声明触发的事件。

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

事件校验

要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入 emit 的内容，返回一个布尔值来表明事件是否合法。

示例：

<script setup>
const emit = defineEmits({
  // 没有校验
  click: null,

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

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>