Vue 组件之间的对话：用 $emit 和 Event Bus 传递信息

2023-09-13 18:22:56

Vue 组件间的通信

在 Vue 中，组件之间可以相互发送事件，从而实现信息传递。这可以通过两种方式实现：

通过 emit 和 on ：这是最常用的方法。子组件通过 emit 方法触发一个事件，父组件或其他兄弟组件通过 on 方法监听该事件。
通过 Event Bus ：Event Bus 是一种全局事件管理器，允许组件之间进行通信，而不需要直接耦合。

使用 emit 和 on 传递信息

在子组件中触发事件

// 子组件
export default {
  methods: {
    triggerEvent() {
      this.$emit('my-event', 'some data');
    }
  }
}

在父组件或兄弟组件中监听事件

// 父组件或兄弟组件
export default {
  methods: {
    handleEvent(data) {
      console.log(data);
    }
  },
  mounted() {
    this.$on('my-event', this.handleEvent);
  },
  beforeDestroy() {
    this.$off('my-event', this.handleEvent);
  }
}

使用 Event Bus 传递信息

创建一个 Event Bus 实例

// main.js
import Vue from 'vue'
import VueEventBus from 'vue-eventbus'

Vue.use(VueEventBus)

export default new VueEventBus({
  onlyEmit: true
})

在组件中使用 Event Bus

// 子组件
export default {
  methods: {
    triggerEvent() {
      this.$bus.$emit('my-event', 'some data');
    }
  }
}

// 父组件或兄弟组件
export default {
  methods: {
    handleEvent(data) {
      console.log(data);
    }
  },
  mounted() {
    this.$bus.$on('my-event', this.handleEvent);
  },
  beforeDestroy() {
    this.$bus.$off('my-event', this.handleEvent);
  }
}