Vue3 如何使用 Emit，你学会了吗？-51CTO.COM

图片

1. vue3 使用 emit

在 Vue 3 中，emit 是一种用于在子组件中触发事件并在父组件中监听这些事件的机制。

这为组件间通信提供了一种方式，尤其是在处理父子组件数据传递和交互时非常有用。

Vue 3 支持两种主要的方式来使用 emit：

1.1. 选项 API 方式

在传统的选项 API 方式中，emit 是通过 this.$emit 来调用的。

例如：

// 子组件 ChildComponent.vue
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child');
    }
  }
}
</script>

在父组件中，你可以监听子组件发出的事件：

<ChildComponent @custom-event="handleCustomEvent" />

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log(payload); // 输出 'Hello from child'
    }
  }
}
</script>

这种方式简单直观，适用于不需要严格类型检查的场景。

1.2. 组合 API 方式

Vue 3 引入了 Composition API，提供了更强大的工具集来构建组件。

在这种情况下，你可以使用 defineEmits 函数来定义和使用 emit：

// 子组件 ChildComponent.vue
<template>
  <button @click="emitEvent">Click me</button>
</template>

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

export default {
  setup() {
    const emit = defineEmits(['custom-event']);
    
    function emitEvent() {
      emit('custom-event', 'Hello from child with Composition API');
    }

    return { emitEvent };
  }
}
</script>

同样地，在父组件中监听子组件发出的事件：

<ChildComponent @custom-event="handleCustomEvent" />

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log(payload); // 输出 'Hello from child with Composition API'
    }
  }
}
</script>

这种方法允许你在组件的 setup 函数中定义 emit，并且可以更灵活地处理组件间的通信。

1.3. 验证函数

Vue 3 允许你在 emits 选项中使用验证函数，以确保传递给 $emit 的参数符合预期。

验证函数应该返回一个布尔值来指示事件参数是否有效。

这有助于防止在生产环境中由于错误的参数而导致的问题。

1.4. 事件总线

对于更加复杂的跨组件通信，你可以使用事件总线（Event Bus）。

事件总线允许组件之间通过一个中心化的实例来发送和接收事件，这种方式特别适用于那些没有直接父子关系的组件间通信。

例如，使用 mitt 库可以轻松实现事件总线的功能。

1.5. 注意事项

当使用 emit 时，有几个注意事项：

确保在父组件中正确监听子组件发出的事件。
在子组件中触发事件时，确保传递正确的参数。
如果使用 Composition API，记得导入 defineEmits 并正确使用它。

通过以上方式，你可以有效地利用 emit 在 Vue 3 中实现父子组件间的通信。

此外，如果你的应用中有多个组件需要互相通信，考虑使用事件总线或者更高级的解决方案如 Vuex 来管理状态。