vue实现自定义事件

自定义事件的基本实现

在Vue中，自定义事件通常通过$emit方法触发。父组件可以通过v-on或@监听子组件触发的事件。

// 子组件中触发事件
this.$emit('custom-event', eventData);

<!-- 父组件中监听事件 -->
<child-component @custom-event="handleCustomEvent" />

使用事件总线（Event Bus）

对于非父子组件通信，可以创建一个中央事件总线。新建一个Vue实例作为事件中心，通过$on监听事件，$emit触发事件。

// 创建Event Bus
const EventBus = new Vue();

// 组件A中触发事件
EventBus.$emit('event-name', payload);

// 组件B中监听事件
EventBus.$on('event-name', (payload) => {
  // 处理事件
});

使用v-model实现自定义事件

可以通过model选项自定义组件的v-model行为，使其能够触发自定义事件。

// 子组件中定义model选项
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  methods: {
    handleInput() {
      this.$emit('change', newValue);
    }
  }
}

<!-- 父组件中使用v-model -->
<custom-checkbox v-model="isChecked" />

使用.sync修饰符

Vue提供了.sync修饰符来实现父子组件的双向绑定，实际上是语法糖。

// 子组件中触发更新
this.$emit('update:title', newTitle);

<!-- 父组件中使用.sync -->
<text-document :title.sync="doc.title"></text-document>

高级自定义事件模式

对于更复杂的需求，可以结合Vue的provide/inject特性或Vuex状态管理来实现跨组件通信。

// 提供事件处理函数
provide() {
  return {
    handleCustomEvent: this.handleCustomEvent
  }
}

// 注入事件处理函数
inject: ['handleCustomEvent']

// 在Vuex中通过actions处理事件
actions: {
  customEventAction({ commit }, payload) {
    // 处理事件逻辑
  }
}