Vue事件相关API的全面指南

2024-01-23 18:59:31

监听自定义事件

Vue.js允许您在组件上监听自定义事件。这些事件可以由vm.$emit触发。当自定义事件被触发时，所有监听该事件的回调函数都将被调用，并传入事件触发函数的额外参数。

// 在组件中监听自定义事件
export default {
  methods: {
    handleCustomEvent(data) {
      console.log('Custom event triggered!', data);
    }
  },
  mounted() {
    this.$on('custom-event', this.handleCustomEvent);
  },
  beforeDestroy() {
    this.$off('custom-event', this.handleCustomEvent);
  }
};

触发事件

您可以使用vm.$emit方法触发自定义事件。当您调用此方法时，所有监听该事件的回调函数都将被调用，并传入您提供的所有额外参数。

// 在组件中触发自定义事件
export default {
  methods: {
    triggerCustomEvent() {
      this.$emit('custom-event', {
        message: 'Hello, world!'
      });
    }
  }
};

使用事件总线实现组件间通信

Vue.js还允许您使用事件总线实现组件间通信。事件总线是一个全局对象，允许您在不同的组件之间发送和接收事件。这对于构建复杂且交互式的Vue应用程序非常有用。

// 创建事件总线
const eventBus = new Vue();

// 在组件中监听事件
export default {
  methods: {
    handleCustomEvent(data) {
      console.log('Custom event triggered!', data);
    }
  },
  mounted() {
    eventBus.$on('custom-event', this.handleCustomEvent);
  },
  beforeDestroy() {
    eventBus.$off('custom-event', this.handleCustomEvent);
  }
};

// 在另一个组件中触发事件
export default {
  methods: {
    triggerCustomEvent() {
      eventBus.$emit('custom-event', {
        message: 'Hello, world!'
      });
    }
  }
};