【从零开始学习Vue｜第八篇】深入组件——组件事件

1. 触发和监听事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

xml 复制代码

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

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

ini 复制代码

父组件
<MyComponent @some-event="callback" />

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

ini 复制代码

设置事件只触发一次
<MyComponent @some-event.once="callback" />

像组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。

2. 事件参数

有时候我们会需要在触发事件时附带一个特定的值。举例来说，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：

kotlin 复制代码

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

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：

ini 复制代码

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

或者，也可以用一个组件方法来作为事件处理函数：

ini 复制代码

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

该方法也会接收到事件所传递的参数：

javascript 复制代码

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

案例如下：

xml 复制代码

<!-- 子组件 MyButton.vue -->
<template>
  <!-- 传递 1 给父组件 -->
  <button @click="$emit('increaseBy', 1)">+1</button>
  
  <!-- 也可以传递 5 -->
  <button @click="$emit('increaseBy', 5)">+5</button>
  
  <!-- 也可以传递 10 -->
  <button @click="$emit('increaseBy', 10)">+10</button>
</template>

<!-- 父组件 -->
<template>
  <MyButton @increase-by="(n) => count += n" />
  <p>当前计数：{{ count }}</p>
</template>

<script setup>
const count = ref(0)
</script>

3. 事件校验

xml 复制代码

<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>