vue3组件通信之全局事件总线

最新推荐文章于 2024-10-10 17:17:55 发布

学习不止境

最新推荐文章于 2024-10-10 17:17:55 发布

阅读量1.6k

点赞数 4

分类专栏： vue3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52222401/article/details/130813259

版权

vue3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在Vue3中，由于没有Vue构造函数和组合式API的this，使用mitt插件来创建全局事件总线。组件1通过onMounted监听song事件，组件2在按钮点击时通过$bus.emit发送数据，实现了兄弟组件间的通信。

摘要由CSDN通过智能技术生成

全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。
但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，
那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能
可以使用插件mitt实现。
mitt:官网地址
创建bus.ts文件引入mitt插件

//引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;

组件1代码如下：

<template>
  <div class="child1">
    <h3>我是组件1</h3>
  </div>
</template>

<script setup lang="ts">
import $bus from "../../bus.ts";
//组合式API函数
import { onMounted } from "vue";
//组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(() => {
  //第一个参数:即为事件类型  第二个参数:即为事件回调
  $bus.on("song", (song) => {
    console.log(song);
  });
});
</script>

组件2代码如下：

<template>
  <div class="child2">
     <h2>我是组件1</h2>
     <button @click="handler">点击我给兄弟点一首歌</button>
  </div>
</template>

<script setup lang="ts">
//引入$bus对象
import $bus from '../../bus.ts';

const handler = ()=>{
  $bus.emit('song',{song:"青花瓷"});
}
</script>

点击组件2中按钮发送数据，组件1中接收