当前位置：首页 > VUE

vue on emit实现

2026-01-19 01:31:26VUE

Vue 中 `$emit` 的实现

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

基本用法

子组件中触发事件：

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

父组件中监听事件：

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

传递多个参数

子组件可以传递多个参数：

this.$emit('event-name', arg1, arg2, arg3);

父组件通过方法接收：

methods: {
  handleEvent(arg1, arg2, arg3) {
    // 处理参数
  }
}

事件验证

Vue 支持在组件定义中验证事件：

export default {
  emits: {
    'event-name': (payload) => {
      // 返回 true 表示验证通过
      return typeof payload === 'string';
    }
  }
}

与 v-model 集成

自定义组件可以实现 v-model：

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value);
    }
  }
}

事件修饰符

可以通过 .native 修饰符监听原生事件：

<child-component @click.native="handleClick" />

事件总线模式

创建全局事件总线：

// main.js
Vue.prototype.$eventBus = new Vue();

// 组件A
this.$eventBus.$emit('event-name', data);

// 组件B
this.$eventBus.$on('event-name', (data) => {
  // 处理数据
});

注意事项

事件名建议使用 kebab-case 命名
避免在事件名中使用 Vue 保留前缀
大型项目建议使用 Vuex 代替频繁的事件通信
记得在组件销毁前移除事件监听

高级用法

可以结合 provide/inject 实现跨层级组件通信：

vue on emit实现

// 祖先组件
provide() {
  return {
    eventDispatcher: (event, payload) => {
      this.$emit(event, payload);
    }
  }
}

// 后代组件
inject: ['eventDispatcher'],
methods: {
  triggerEvent() {
    this.eventDispatcher('custom-event', data);
  }
}