vue中的消息订阅与发布

最新推荐文章于 2024-06-22 21:13:07 发布

cool boys

最新推荐文章于 2024-06-22 21:13:07 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/dskjhfjkdsh/article/details/124163750

版权

本文介绍了在Vue应用中如何使用pubsub-js库实现消息订阅与发布，以及如何通过事件总线进行组件间的通信。详细讲解了pubsub的安装、引入、订阅、发布及取消订阅的步骤，同时阐述了事件总线在解决跨层级组件通信中的优势，并给出了在main.js和组件中使用事件总线的示例。

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

1.运用pubsub

（1）安装pubsub：npm i pubsub-js

（2）引入：import pubsub from 'pubsub'

（3）接收数据：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methds(){
    demo(data){...}
}
....
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

（4）提供数据：pubsub.publish('xxx',数据)

（5）最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span style="color:red">取消订阅</span>

2.事件总线

事件总线介绍：在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信

事件总线的使用

在main.js中引入事件总线

//将事件总线作为Vue.prototype的属性，方便每个组件中通过this.$bus获取事件总线
Vue.prototype.$bus = new Vue({ })

直接使用vue实例作为事件总线，是因为vue实例上本身就具有这三个方法$on、emit、off

App.vue中触发事件总线的事件

<template>
  <div&g

关注

专栏目录