VUE--组件间通信--全局事件总线

最新推荐文章于 2024-10-22 22:57:19 发布

春风霓裳

最新推荐文章于 2024-10-22 22:57:19 发布

阅读量214

点赞数

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

本文链接：https://blog.csdn.net/qq_43470725/article/details/125119994

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue中使用全局事件总线实现组件间的通信。通过在`main.js`的`beforeCreate`钩子安装事件总线，并在组件中使用`$on`、`$off`和`$emit`方法，实现了兄弟组件之间的数据传递。同时，强调了事件总线对象的获取和解绑操作，确保了通信的准确性和资源管理。

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

请先了解自定义事件：https://blog.csdn.net/qq_43470725/article/details/125118869

全局事件总线适用于任何组件关系间的通信；
思想：单独抽离一个对象出来专门用于各个组件间事件传递信息！
原理图：
在这里插入图片描述
该对象应该具备以下的要求：
**1、所有的组件都能拿到它
2、能调用到 $on, $off, $emit **

vue和vuecomponent的关系图：
在这里插入图片描述

所以可以事vue对象或者组件对象！
并且要把它放在vue的实例对象上或者vuecomponent实例对象上面(一般不放在window身上)！！

实现方式很多种，这里介绍最标准的一种：
1、在main.js里面的vue对象的beforeCreate钩子上安装全局总线
2、兄弟间拿到该全局事件总线进行通信

main.js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// const Demo = Vue.extend({}) //Demo为vuecomponent的原型实例对象
// const d = new Demo()
// Vue.prototype.x = d

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this //安装全局事件总线
  }
}).$mount('#app')

school:

<template>
    <div class="school">
        <h2>学校名 ： {{name}}</h2>
        <button @click="sendSchoolName">把学校名给app</button>
    </div>    
</template>

<script>
export default {
    name:'Student',
    props:['getSchoolName'],
    data(){
        return{
            name:'尚硅谷',
        }
    },
    methods:{
        sendSchoolName(){
            this.getSchoolName(this.name)
        },

    },
    mounted(){
        this.$bus.$on('hello',(data)=>{
            console.log('我是school组件，收到了数据',data)
        })
    }
    
}
</script>

<style scoped>
    .school{
        background-color: aqua;
    }
</style>

student:

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

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

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

这里注意解绑最好在销毁之前的钩子解绑：

 beforeDestroy(){
        this.$bus.$off('hello')
    }