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