vue 组件通信--非父子组件之间的通信

非父子组件之间的通信:

1.兄弟组件

2. 用了插槽slot的组件之间通信

vue2中可以使用eventBus事件监听

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')

vue3中,可以使用第三方插件 mitt

Vue3.x中删除了on 和 off,因此不能借助于一个单独的Vue实例来实现全局事件的发布和订阅与取消订阅(也就是跨组件通讯)。

  • all(Map对象):包含了所有订阅的事件名称,及对应的处理方法数组。
  • emit(方法):触发事件,参数为(事件名(方法名),携带的参数),当- 前携带的参数只能为一个,不能为多个。
  • on(方法):创建事件订阅,参数为(事件名,处理方法)。
  • off(方法):取消事件订阅,参数为(事件名,处理方法)
npm install --save mitt
const emitter = mitt()
export emitter
原文地址:https://www.cnblogs.com/shine-lovely/p/14717031.html