vue实现自定义事件

Vue 自定义事件实现方法

在 Vue 中，自定义事件是通过 $emit 方法触发的，父组件通过 v-on 或 @ 监听子组件触发的事件。以下是几种常见的实现方式：

子组件触发事件

在子组件中，使用 this.$emit('事件名', 参数) 触发自定义事件：

// ChildComponent.vue
methods: {
  handleClick() {
    this.$emit('custom-event', { data: 'example' })
  }
}

父组件监听事件

父组件通过 v-on 或 @ 监听子组件触发的事件：

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

<script>
methods: {
  handleCustomEvent(payload) {
    console.log(payload.data) // 输出: 'example'
  }
}
</script>

使用 v-model 实现双向绑定

Vue 的自定义事件可以与 v-model 结合使用，实现父子组件的双向数据绑定：

// ChildComponent.vue
props: ['value'],
methods: {
  updateValue(newValue) {
    this.$emit('input', newValue)
  }
}

父组件中使用 v-model：

<child-component v-model="parentData" />

事件总线（Event Bus）

对于非父子组件通信，可以创建一个中央事件总线：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

组件中触发事件：

// ComponentA.vue
import { EventBus } from './event-bus.js'
EventBus.$emit('event-name', data)

组件中监听事件：

// ComponentB.vue
import { EventBus } from './event-bus.js'
EventBus.$on('event-name', data => {
  // 处理数据
})

注意事项

• 自定义事件名建议使用 kebab-case 命名
• 组件销毁前应移除事件监听，避免内存泄漏
• 对于复杂应用，建议使用 Vuex 进行状态管理而非过度依赖事件总线