Vue3 通讯之自定义事件

1. 触发自定义事件

在子组件中，使用 defineEmits 函数来定义可以触发的自定义事件。defineEmits 接收一个字符串数组或一个对象作为参数，其中字符串数组表示可以触发的事件名称，对象则可以包含事件名称和对应的参数类型。

使用字符串数组:

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits(['update-count', 'submit-form']);

const incrementCount = () => {
  emit('update-count', 1); // 触发 update-count 事件，并传递参数 1
};

const submitForm = () => {
  emit('submit-form', { name: 'John', age: 30 }); // 触发 submit-form 事件，并传递一个对象作为参数
};
</script>

使用对象:

<script setup lang="ts">
import { defineEmits } from 'vue';

const emit = defineEmits({
  'update-count': (count: number) => {
    if (count < 0) {
      console.warn('Count cannot be negative.');
      return false; // 阻止事件触发
    }
    return true; // 允许事件触发
  },
  'submit-form': null, // 不进行参数类型检查
});
</script>

2. 监听自定义事件

在父组件中，使用 v-on 指令或简化的 @ 语法来监听子组件触发的自定义事件。

<template>
  <div>
    <MyComponent @update-count="handleUpdateCount" @submit-form="handleSubmitForm" />
  </div>
</template>

<script setup lang="ts">
const handleUpdateCount = (count: number) => {
  console.log('Count updated:', count);
};

const handleSubmitForm = (data: { name: string; age: number }) => {
  console.log('Form submitted:', data);
};
</script>

3. 事件参数

子组件可以通过 emit 函数的第二个参数向父组件传递数据。父组件则可以在事件处理函数中接收这些数据。

// 子组件
emit('my-event', 'Hello from child!');

// 父组件
const handleMyEvent = (message: string) => {
  console.log('Message from child:', message);
};

4. .once 修饰符

可以使用 .once 修饰符来指定事件只监听一次。

<MyComponent @my-event.once="handleMyEvent" />

总结

自定义事件是 Vue 3 中实现父子组件通信的重要机制。子组件可以通过 defineEmits 和 emit 函数来触发自定义事件，父组件则可以通过 v-on 或 @ 语法来监听这些事件并进行相应的处理。

自定义事件的优势:

• 解耦合: 父子组件之间不需要直接引用，通过事件进行通信，降低了耦合度。
• 灵活性: 可以根据需要定义不同的事件，实现更灵活的通信方式。
• 可扩展性: 可以方便地添加新的事件，而不会影响现有的代码。

希望本教程能够帮助你理解 Vue 3 中自定义事件的使用方法。

附加内容：

• $emit: 在 Options API 中，可以使用 this.$emit 来触发自定义事件。
• Event Bus: 可以使用 Event Bus 来实现非父子组件之间的通信。
• Vuex: 对于复杂的应用，可以使用 Vuex 来进行状态管理和组件通信。