vue实现自定义事件

Vue 自定义事件实现方法

在 Vue 中实现自定义事件主要依赖 $emit 方法，允许子组件向父组件通信。以下是具体实现方式：

子组件触发事件

通过 this.$emit('事件名', 可选参数) 触发自定义事件：

// ChildComponent.vue
<template>
  <button @click="handleClick">触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', { data: '示例数据' })
    }
  }
}
</script>

父组件监听事件

在父组件中使用 v-on 或 @ 语法监听子组件触发的事件：

// ParentComponent.vue
<template>
  <child-component @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('收到事件:', payload.data) // 输出: "示例数据"
    }
  }
}
</script>

事件校验（Vue 3+）

Vue 3 支持为自定义事件添加校验：

// ChildComponent.vue
export default {
  emits: {
    'custom-event': (payload) => {
      // 返回布尔值表示事件是否有效
      return payload && typeof payload.data === 'string'
    }
  },
  methods: {
    handleClick() {
      this.$emit('custom-event', { data: '有效数据' })
    }
  }
}

移除事件监听器

可以通过 $off() 方法移除事件监听：

// 移除特定事件
this.$off('custom-event')

// 移除所有事件
this.$off()

事件总线模式（跨组件通信）

创建全局事件总线实现任意组件间通信：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 组件A发送事件
EventBus.$emit('global-event', data)

// 组件B监听事件
EventBus.$on('global-event', callback)

注意事项

• 事件名推荐使用 kebab-case 命名（如 my-event）
• Vue 3 的 emits 选项可替代 $listeners（已移除）
• 避免过度使用事件总线，复杂场景建议使用 Vuex/Pinia

通过以上方式可以灵活实现 Vue 组件间的自定义事件通信。