Vue2+Vue3组件间通信方式汇总（3）------$bus

?组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。

Vue2+Vue3组件间通信方式汇总（1）------props

Vue2+Vue3组件间通信方式汇总（2）------$emit

一、全局总线$bus 原型链

归根结底就是在vm，vue原型链上注册一个名叫$bus 的对象，再把this，就是vm实例对象赋给$bus，其中$on $emit $off等就是全局可以读可写的变量,即可实现，相关组件、不相关组件之间数组地传递。

------Vue2?

main.js文件中，Vue实例下，往Vue原型链上注册属性：$bus

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this//注册全局事件总线
	}
})

其中一个组件：调用全局总线的$emit：

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给另一个组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		methods:{
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		}

	}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

?另一个组件：调用全局总线的$on：

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'学校名',
				address:'学校地址',
			}
		},
		mounted() {
			this.$bus.$on('hello',(data) => { //绑定自定义事件hello，并留下回调函数
				console.log('我收到了'+data);
			})
		},
		beforeDestroy() {
			this.$bus.$off('hello')			
		},

	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

?------Vue3? ?不存在vm所以需要引入mitt插件

npm install mitt

在bus.ts文件中引入：?

import mitt from "mitt"
//mitt是一个函数，赋给命名为$bus的变量
const $bus=mitt();
//向外暴露这个变量
export default $bus

?其中一个组件：

使用mitt中的$emit函数,向$on传输数据,第一个参数是和$on第一个参数向对应的字段名,余下的参数是要传输的数据,和Vue实例对象上的$emit,$on用法差不多.

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给另一个组件</button>
	</div>
</template>

<script setup lang="ts">
import ref from "vue"
import $bus from "./bus.ts"
let name=ref("张三")
let sex=ref("男")
let sendStudentName=(name.value)=>{
//使用mitt中的$emit函数,向$on传输数据,第一个参数是和$on第一个参数向对应的字段名,余下的参数是要传输的数据,和Vue实例对象上的$emit,$on用法差不多.
    $bus.$emit("hello",name.value)
}
</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

?另一个组件：$on接收数据

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给另一个组件</button>
	</div>
</template>

<script setup lang="ts">
import {ref，onMounted) from "vue"
import $bus from "./bus.ts"
let name=ref("张三")
let sex=ref("男")
onMounted(()=>{
    $bus.$on("hello",(data)=>{
         name.value=data
          })

})

</script>

<style scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>