vue3使用事件主线实现非父子页面之间的通信

虽然还是用emit on，但是不同于vue2的写法

在vue3中，要npm i mitt

然后，新建一个js文件mitt.js

import mitt from 'mitt'
const bus = mitt()
export default mitt

在要使用的页面中import bus from './mitt.js'

如果不想这么麻烦在每个文件中都要import mitt，可以在main.js中全局引入，然后挂载到原型上，就可以通过this.的方式去使用

main.js

import bus from 'mitt'
const bus = mitt()
app.config.globalProperties.$bus = bus

使用事件主线的a.vue，emit是触发某个事件，如果要传值，就把第二个参数写成要传的值

<template>
	<el-dropdown-menu>
       <el-dropdown-item @click="$bus.emit('toggle')">全屏</el-dropdown-item>
       <!-- 组件上面写原生事件，要加native修饰符 -->
       <el-dropdown-item @click="quit">退出</el-dropdown-item>
    </el-dropdown-menu>
</template>

使用事件主线的b.vue，on是监听某个方法，只要这个方法一被emit触发，on监听到后就会执行回调函数里面的内容

<script>
export default {
	mounted() {
    // 监听一下toggle事件，当被触发时，执行回调函数
    this.$bus.on('toggle', () => {
      this.$refs['fullscreen'].toggle()
    })
  }
}
</script>

这样之后，a.vue就可以给b.vue传值，或者调用b.vue里面的方法了