vue3_硅谷甄选_004_mitt插件实现兄弟组件通信

在vue2当中我们可以根据vm和vc去推出全局实现总线，可以实现任意组件通信；

在vue3框架当中，它的vue构造函数没有了；

导致没有了vm

vue的原型对象也没有了；

this.$bus.$emit('send-message', message);

vue3组件的语法是setup；组合式API的语法；也没有this的写法；

vue3当中如果想要使用全局事件总线，这个业务，可以使用一个插件叫做mitt

举例

如图child1和child2是兄弟组件，EventBus是父组件，我们实现兄弟组件之间的通信；

定义父组件

定义子组件

父组件当中引入第一个子组件

定义第二个子组件

父组件当中引入第二个子组件

需求：让两个子组件水平排列，放在一行

需求：兄弟组件通信

子组件2上有一个按钮，点击这个按钮，就可以给子组件1送一台车法拉利；

☆ 查看mitt插件怎么使用

mitt这个英语是接棒球的意思；

使用mitt

绑定事件

on方法是接收数据；

emit方法是送数据；

组件挂载完毕的时候，当前组件绑定一个事件，接收将来兄弟组件传递的数据；

import $bus from '../../bus';
import { onMounted } from "vue";
onMounted(() => {
    $bus.on("car", (car) => {
        console.log(car);
    });
});

发送事件

第一个组件打印出来了，通信成功

很类似pubsub，一个是发布，一个是订阅；