vue3 defineEmits的使用 和vue2对比

在Vue 3中，可以使用defineEmits来定义组件的自定义事件。defineEmits函数接受一个参数，该参数是一个数组或对象，用于指定需要定义的自定义事件。

使用数组定义自定义事件：

import { defineComponent, defineEmits } from 'vue';

const MyComponent = defineComponent({
  emits: defineEmits(['myEvent']),
  methods: {
    handleClick() {
      this.$emit('myEvent', 'Hello from MyComponent');
    }
  }
});

使用对象定义自定义事件：

import { defineComponent, defineEmits } from 'vue';

const MyComponent = defineComponent({
  emits: defineEmits({
    myEvent: (arg1: string, arg2: number) => {
      return typeof arg1 === 'string' && typeof arg2 === 'number';
    }
  }),
  methods: {
    handleClick() {
      this.$emit('myEvent', 'Hello', 42);
    }
  }
});

在上述示例中，我们首先使用defineEmits函数定义了一个自定义事件myEvent。然后，在组件的方法中，可以使用this.$emit触发该自定义事件，并传递相应的参数。

需要注意的是，Vue 3中的组件默认不会派发父组件未注册的事件。因此，我们需要使用defineEmits显式地定义自定义事件，以便在组件中触发和派发这些事件。

同时，defineEmits还具有类型推导的功能，可以根据传入的参数类型来推断事件的参数类型，并在IDE中提供代码补全和类型检查的支持。

defineEmits API 说明 和使用场景

defineEmits是Vue 3中的一个API，用于定义组件的自定义事件。它接受一个参数，可以是一个数组或对象，用于指定需要定义的自定义事件。

• 如果传入一个数组，数组的每个元素就是一个字符串，表示一个自定义事件的名称。
• 如果传入一个对象，对象的键就是自定义事件的名称，值可以是一个函数，用于验证自定义事件的参数类型。

使用defineEmits的场景主要是在组件中需要定义自定义事件，并在组件内部通过$emit来触发这些事件，以便与父组件进行通信。

例如，在一个按钮组件中定义一个自定义事件click：

import { defineComponent, defineEmits } from 'vue';

const MyButton = defineComponent({
  emits: defineEmits(['click']),
  methods: {
    handleClick() {
      this.$emit('click');
    }
  }
});

然后，在父组件中可以监听这个自定义事件，并执行相应的逻辑：

<template>
  <MyButton @click="handleButtonClick" />
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  methods: {
    handleButtonClick() {
      console.log('Button clicked!');
    }
  },
  components: {
    MyButton
  }
}
</script>

Vue 2中

在Vue 2中，我们可以使用$emit方法来触发自定义事件，并在父组件中通过v-on或@来监听这些事件。以下是使用Vue 2创建自定义事件的示例：

首先，在子组件中使用$emit触发自定义事件：

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('my-event', 'event payload');
    }
  }
});

然后，在父组件中使用v-on或@来监听自定义事件：

<my-component v-on:my-event="handleEvent"></my-component>
<!-- 或者使用 @ -->
<my-component @my-event="handleEvent"></my-component>

最后，在父组件的方法中处理自定义事件：

methods: {
  handleEvent(payload) {
    // 处理事件逻辑
    console.log('Received event:', payload);
  }
}

在这个示例中，子组件通过$emit方法触发了一个名为my-event的自定义事件，并传递了一个payload作为参数。父组件通过v-on或@监听这个自定义事件，并在对应的方法中处理事件逻辑。

需要注意的是，在Vue 2中，自定义事件的传递是单向的，只能从子组件向父组件传递数据。如果需要在父组件中向子组件传递数据，可以使用props来实现。

使用场景：

• 父子组件通信：自定义事件是Vue 2中实现父子组件通信的一种方式。父组件可以监听子组件触发的自定义事件，从而获取子组件传递的数据或执行相应的逻辑。
• 组件解耦：通过使用自定义事件，可以将组件解耦，使得组件之间的通信更加灵活和可维护。组件可以通过触发自定义事件来通知其他组件发生了某些特定的动作或状态变化。

优点：

• 灵活性：自定义事件提供了一种灵活的方式来实现组件之间的通信，可以根据具体的需求定义和触发不同的事件。
• 组件解耦：通过使用自定义事件，可以将组件解耦，使得组件之间的通信更加灵活和可维护。

缺点：

• 单向传递：Vue 2中的自定义事件是单向传递的，只能从子组件向父组件传递数据。如果需要在父组件向子组件传递数据，需要使用props来实现。
• 需要手动管理事件：在使用自定义事件时，需要手动定义和管理事件的名称和参数，相对于其他通信方式，需要更多的配置和代码。

总体来说，Vue 2中的自定义事件适用于父子组件之间的通信和组件解耦的场景。它提供了一种灵活的方式来实现组件之间的通信，但需要手动管理事件，并且只能实现单向传递。在一些复杂的场景中，可能需要考虑使用Vuex或其他状态管理库来管理组件之间的共享状态。