vue3组件之间通信(六)——eventBus的使用

---

1：安装

npm i mitt

2：注册

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt' 
 
const app = createApp(App)
app.config.globalProperties.emitter = mitt() // 主要是这行

3：封装一个myEventBus.js

这个文件一个是在页面同意级别的目录下建立的，如src/eventBus/myEventBus.js

import { getCurrentInstance } from 'vue'
 
export default function myEventBus() {
    const internalInstance = getCurrentInstance()
    const emitter = internalInstance.appContext.config.globalProperties.emitter
    return emitter
}

主要是获取emitter的all，emit，off，on的方法

4：使用（案例）

（1）：目录截图

（2）：myEventBus.js，同第三步
（3）：index.vue

<template>
  <div class="index">
    <h1>index页面:{{ indexMsg }}</h1>
    <button @click="getBorder">点我</button>
    <Brother />
  </div>
</template>
<script setup>
import Brother from "./brother.vue";
import { ref } from "vue";
import myEventBus from "./myEventBus.js";

const indexMsg = ref("index---张三");

const emitter = myEventBus();
function getBorder() {
  emitter.emit("indexMsg", indexMsg);
}
</script>
<style scoped>
.index {
  width: 200px;
  height: 200px;
  border: 1px solid skyblue;
}
</style>

（4）： border.vue

<template>
  <div class="borther">
    <h1>borther:{{ borderMsg }}</h1>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import myEventBus from "./myEventBus.js";
const borderMsg = ref("");
const emitter = myEventBus();
emitter.on("indexMsg", (value) => {
  console.log("value", value);
  borderMsg.value = value;
});
</script>
<style scoped>
.borther {
  width: 200px;
  height: 100px;
  border: 1px solid red;
}
</style>

5：效果

这就是一个vue3中eventBus的简单使用了。同理，如果要传方法等的话，在border.vue中

emitter.on("indexMsg", (value) => {
  console.log("value", value);
  value(); // 直接调用这个方法获取用一个变量接收后调用即可，其他和传递属性的过程一样
});