vue全局事件总线和消息订阅详细讲解

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

全局事件总线

在写组件的时候，我们都知道父传递子
也知道子传递给父
但是组件间嵌套复杂的时候我们应该怎么通信呢?
有的小伙伴会说适用vuex，的确是可以解决问题的
下面我们说一下全局事件总线
一种组件间通信的方式，适用于任意的组件间通信。

场景描述

a-test组件向b-test传递数据.
我们就需要使用全局事件总线。
全局事件总线非常简单
通过this.$bus.$emit('事件名',数据)进行提供数据
通过this.$bus.$on('事件名',(data)=>{ })接受数据
通过接受数据方的组件中销毁对应的事件
beforeDestroy() {
    this.$bus.$off('hello')
},

全局事件总线第一步: main.js中注入

// demo就是 vueComponent
// 因为 Vue.extend({})的返回值就是 vueComponent
let Demo = Vue.extend({})
// d就是vueComponent的实例对象哈
let d = new Demo();
Vue.prototype.x=d
我们需要有一个副本或者说傀儡来进行存放[通知]
我们将它放在vueComponent这个实例上
感觉这样写有点麻烦，后面我们想办法优化一下

第二步: a-test发送数据

<template>
    <div class="flexflex">
        <el-button @click="gievHander">将数据传递给b-test组件</el-button>
        <h2 >我是a-test组件</h2>
    </div>
</template>
<script>
export default {
    methods:{
        gievHander(){
           this.x.$emit('hello',666)
        }
    },
}
</script>

第三步:b-test组件接受数据

<template>
    <div class="btest">
        <h2>我是b-test组件</h2>
        <div>传递过来的数据 {{ getDaoData  }}</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                getDaoData:''
            }
        },
        mounted(){
           this.x.$on('hello',(data)=>{
                // hello是监听的事件名称，
               console.log('监听的事件数据',data  )
               this.getDaoData=data
           })
        },
    }
</script>

将第一步进行优化

虽然上面这样的写法虽然是可以的。
但是不够简洁。我们需要将main.js优化一下
new Vue({
router,
render: (h) => h(App),
    <!-- 添加下面这四行行代码 -->
    beforeCreate() {
        // 生命周期中的this指向的是vue实例
        //安装全局事件总线；x最好改为$bus
        Vue.prototype.x=this
    }
}).$mount("#app");

第三步：持续优化

当这个组件销毁的时候，我们应该将事件销毁
<template>
    <div class="btest">
        <h2>我是b-test组件</h2>
        <div>传递过来的数据 {{ getDaoData  }}</div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                getDaoData:''
            }
        },
        mounted(){
           this.x.$on('hello',(data)=>{
                // hello是监听的事件名称，
               console.log('监听的事件数据',data  )
               this.getDaoData=data
           })
        },
        beforeDestroy() {
            //组件销毁的时候，销毁对应的事件
            this.x.$off('hello')
            //注意 this.x.$off()表示销毁事件总线的所有事件
        },
    }
</script>

消息订阅与发布

有的同学可能会问，处了使用刚刚提供的哪一种，还有其他方法吗？
还真的有，只不过需要依赖第三方库！
cnpm  i  pubsub-js  需要安装一下这个库
安装后，需要引入一下。
订阅: pubsub.publish(消息名,数据) 
接受：pubsub.subscribe(消息名,(msgName,data)=>{})
销毁: pubsub.unsubscribe('xx')

a-test发送数据

<template>
    <div class="flexflex">
        <el-button @click="gievHander">将数据传递给b-test组件</el-button>
        <h2 >我是a-test组件</h2>
    </div>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
    methods:{
        gievHander(){
            pubsub.publish('dingyueming','发布消息啦')
        }
    },
}
</script>

b-test接受数据

<template>
    <div class="btest">
        <h2>我是b-test组件</h2>
        <div>传递过来的数据=> {{ getDaoData  }}</div>
    </div>
</template>
<script>
import pubsub from 'pubsub-js'
    export default {
        data(){
            return {
                getDaoData:'',
                pubId:''
            }
        },
        mounted(){
           this.pubId=pubsub.subscribe('dingyueming',(msgName,data)=>{
                // 第一个参数是订阅的名称 msgName
                // 第二个参数是数据
               this.getDaoData=data
           })
        },
        // 组件销毁的时候，取消订阅
        beforeDestroy() {
            pubsub.unsubscribe(this.pubId)
        },
    }
</script>

以上是 vue全局事件总线和消息订阅详细讲解 的全部内容， 来源链接： utcz.com/z/380511.html

回到顶部