vue3 自定义事件

Vue 3 中的自定义事件，也称为组件间的通信或 prop 的替代方案，是一种更为灵活的方式，用于在父子、兄弟或任意组件间传递数据和触发行为。在 Vue 3 中，主要使用了 `@` 和 `emit` 关键字来实现自定义事件。

1. **发布（Emitting Events）**: 当一个组件需要通知其他组件更新或执行某个操作时，可以使用 `this.emit(eventName, data)` 来触发一个自定义事件。`eventName` 是你定义的事件名称，`data` 是要传递的数据。

2. **订阅（Listening to Events）**: 在接收事件的组件上，通过 `v-on` 或者 `@event-name` 来监听这个事件，当事件触发时，会执行相应的回调函数。例如：

<parent-component @childEvent="handleChildEvent"></parent-component>

3. ** slots 与自定义事件**：Vue 3 的 `v-slot` 语法也可以配合自定义事件来传递复杂数据，比如从父组件传入动态内容到子组件。

4. **组件解绑事件**: 使用 `off` 方法可以解绑已注册的事件监听器，防止内存泄漏。

相关问题--
1. Vue 3 中如何在子组件中触发一个自定义事件？
2. 如何在父组件中监听并处理子组件的自定义事件？
3. Vue 3 的自定义事件和 prop 有何异同？

相关问题

vue3自定义事件defineemits

在Vue3中，可以使用`defineEmits`来显式地声明组件要触发的自定义事件。这个宏只能在`<script setup>`的顶级作用域下使用，不能在其他函数中使用。

下面是一个示例，演示了如何使用`defineEmits`声明自定义事件并使用`emit`触发事件：

<template>
  <button @click="triggerCustomEvent">触发自定义事件</button>
</template>

<script setup>
import { defineEmits } from 'vue';

// 声明要触发的自定义事件
const emits = defineEmits(['customEvent']);

// 触发自定义事件
const triggerCustomEvent = () => {
  emit('customEvent', '自定义事件的参数');
};
</script>

在上面的示例中，我们首先使用`defineEmits`宏声明了一个名为`customEvent`的自定义事件。然后，在`triggerCustomEvent`函数中，我们使用`emit`函数触发了这个自定义事件，并传递了一个参数。

请注意，`defineEmits`只能在`<script setup>`的顶级作用域下使用，不能在其他函数中使用。

vue3自定义事件写法

在Vue 3中，自定义事件的写法有些不同于Vue 2。下面是Vue 3中自定义事件的常见写法：

1. 使用`$emit`方法触发自定义事件：
在父组件中，可以使用`$emit`方法触发自定义事件，并传递参数。例如：

   <template>
     <button @click="handleButtonClick">点击触发自定义事件</button>
   </template>
   
   <script>
   export default {
     methods: {
       handleButtonClick() {
         this.$emit('my-event', '自定义参数');
       }
     }
   };
   </script>

在子组件中，可以通过`v-on`指令监听并响应自定义事件。例如：

   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: ['message'],
     mounted() {
       this.$parent.$on('my-event', this.handleMyEvent);
     },
     methods: {
       handleMyEvent(payload) {
         console.log(payload); // 输出：自定义参数
       }
     }
   };
   </script>

2. 使用`provide/inject`提供和注入自定义事件：
在父组件中，可以使用`provide`方法提供一个自定义事件的回调函数。例如：

   <template>
     <button @click="handleButtonClick">点击触发自定义事件</button>
     <child-component></child-component>
   </template>
   
   <script>
   import { provide } from 'vue';
   
   export default {
     setup() {
       const handleMyEvent = (payload) => {
         console.log(payload); // 输出：自定义参数
       };
   
       const handleButtonClick = () => {
         handleMyEvent('自定义参数');
       };
   
       provide('my-event', handleMyEvent);
   
       return {
         handleButtonClick
       };
     }
   };
   </script>

在子组件中，可以使用`inject`方法注入父组件提供的自定义事件。例如：

   <template>
     <div>
       <p>{{ message }}</p>
     </div>
   </template>
   
   <script>
   import { inject } from 'vue';
   
   export default {
     setup() {
       const handleMyEvent = inject('my-event');
   
       return {
         message: handleMyEvent ? handleMyEvent('自定义参数') : ''
       };
     }
   };
   </script>

这是Vue 3中常见的自定义事件写法。希望可以帮助到你！