网站建设ag企业网站搭建
组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$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>