Vue3 emit教程

在 Vue 3 中，emit 是组件间通信的一种重要方式，通常用于子组件向父组件发送消息。以下是一个关于如何在 Vue 3 中使用 emit 的详细教程。

1. 基础知识

在 Vue 3 中，你可以使用 setup() 函数来替代传统的 data、methods、computed 等选项。同时，setup() 函数提供了 context 参数，它包含了 attrs、slots 和 emit 等属性。但是，更常见的做法是使用 defineEmits 函数来定义要发出的自定义事件。

2. 使用 defineEmits

在 Vue 3 的 setup() 函数中，你可以使用 defineEmits 函数来定义要发出的自定义事件。

import { defineComponent, defineEmits } from 'vue';

export default defineComponent({
  setup() {
    const emit = defineEmits(['customEvent']);

    const handleClick = () => {
      emit('customEvent', 'Hello from child!');
    };

    return {
      handleClick
    };
  },
  template: `
    <button @click="handleClick">Click me</button>
  `
});

在上面的例子中，我们定义了一个名为 customEvent 的自定义事件，并在 handleClick 方法中触发了这个事件。我们还传递了一个字符串 'Hello from child!' 作为事件的参数。

3. 在父组件中监听事件

在父组件中，你可以使用 v-on 指令（或简写为 @）来监听子组件发出的自定义事件。

import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出: Hello from child!
    }
  },
  template: `
    <div>
      <ChildComponent @customEvent="handleCustomEvent" />
    </div>
  `
};

在上面的例子中，我们在父组件的模板中使用了 ChildComponent，并使用 @customEvent 指令来监听 customEvent 事件。当这个事件被触发时，handleCustomEvent 方法会被调用，并接收到从子组件传递过来的参数。

4. 注意事项

• defineEmits 函数返回的是一个函数，而不是一个对象或数组。因此，你不能直接修改它返回的事件列表。
• 你可以使用 defineEmits 来定义多个事件，只需将它们作为字符串数组传递给 defineEmits 即可。例如：defineEmits(['event1', 'event2'])。
• 在子组件中触发事件时，你可以传递任意数量的参数给事件监听器。这些参数将在父组件的事件处理函数中作为参数接收。
• 如果你不使用 defineEmits 来定义事件，Vue 仍然会正常工作，但使用 defineEmits 可以提供更好的类型检查和代码提示。

本文地址：https://www.tides.cn/p_vue-vue3-emit