vue on emit实现

Vue 中的 $emit 实现

在 Vue 中，$emit 是子组件向父组件传递数据的主要方式。通过自定义事件，子组件可以触发父组件中定义的方法，并传递数据。

基本用法

子组件中通过 $emit 触发事件：

this.$emit('event-name', data);

父组件中监听子组件触发的事件：

<child-component @event-name="handleEvent" />

示例代码

子组件 (ChildComponent.vue)：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!');
    }
  }
};
</script>

父组件 (ParentComponent.vue)：

<template>
  <child-component @message="receiveMessage" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    receiveMessage(msg) {
      console.log(msg); // 输出: Hello from child!
    }
  }
};
</script>

事件验证

Vue 3 中可以通过 emits 选项对事件进行验证：

export default {
  emits: {
    'event-name': (payload) => {
      return typeof payload === 'string'; // 验证 payload 类型
    }
  }
};

注意事项

• 事件名推荐使用 kebab-case 命名（如 my-event）
• 可以通过 $emit 的第二个参数传递多个数据（使用对象包装）
• Vue 3 中移除了 $on、$off 等事件 API，推荐使用 emits 选项