Vue学习(十六)消息订阅与发布(pubsub-js)

消息的订阅与发布(pubsub-js)

一种组件间的通信方式,适用于任意组件间的通信(使用pubsub-js插件)

安装pubsub-js

使用如下命令进行安装

npm i pubsub-js
# 或
yarn add  pubsub-js

引入

在发布消息(提供数据)的组件和订阅消息(获取数据)的组件中引入pubsub-js:import pubsub from 'pubsub-js'

订阅消息

数据的使用者(接收数据)组件中进行订阅消息。
A组件想要接收数据,则在A组件中订阅消息,订阅消息的回调放在A组件本身

...
methods: {
   
    demo(message, data) {
   
        ...
    }
},
...
mounted() {
   
    // 定于消息
    // this.pubId = pubsub.subscribe("消息名", 回调函数)
    this.pubId = pubsub.subscribe("消息名", this.demo)

},
beforeDestroy() {
   
    // 取消订阅
    pubsub.unsubscribe(this.pubId);
},

发布消息

数据的提供者(提供数据)的组件中进行发布消息。
B组件需要提供数据,就在B组件需要提供数据的时候发布消息 pubsub,publish("message", data)

注意

最好在beforeDestroy钩子中使用pubsub.unsubscribe(this.pubId);取消消息订阅

School组件(订阅消息)

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

<script>
    import pubsub from 'pubsub-js'
    export default {
   
        name: "School",
        data() {
   
            return {
   
                name: "尚硅谷",
                address: "北京·昌平"
            }
        },
        methods: {
   
          demo(messageName, data) {
   
            console.log("有人发布了hello消息,消息订阅的回调执行了", messageName, data);
          }
        },
        mounted() {
   
          // 绑定自定义事件
          /* this.$bus.$on("hello", (data) => {
            console.log("我是School组件,收到了数据", data)
          }) */
          this.pubId = pubsub.subscribe("hello", this.demo)
        },
        beforeDestroy() {
   
          // 解绑事件
          // this.$bus.$off("hello");
          pubsub.unsubscribe(this.pubId);
        },
    }
</script>

<style scoped>
  .school {
   
    background-color: skyblue;
    padding
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用pubsub-js的步骤如下: 1. 首先,在项目中安装pubsub-js。可以使用npm或yarn命令进行安装,例如:npm i pubsub-js 或 yarn add pubsub-js。 2. 在需要发布消息的组件和需要订阅消息的组件中引入pubsub-js。可以使用import语句导入pubsub-js,例如:import pubsub from 'pubsub-js'。 3. 在Vue的Main.js文件中执行PubSub的全局注册。可以使用import语句导入PubSub,并将其挂载到Vue的原型上,以便在所有组件中都能访问到pubsub-js的功能。例如:Vue.prototype.PubSub = PubSub。 4. 在发布消息的组件中使用this.publish方法来发送消息。例如:this.publish("msg", "要发送的消息")。其中,msg是必须的参数,用于指定消息的标识符,要发送的消息可以作为第二个参数传递。 5. 在订阅消息的组件中使用this.subscribe方法来接收消息。例如:this.subscribe("msg", (msg, data) => { // 接收的数据 alert(data) })。其中,msg参数是订阅消息的标识符,data参数是接收到的消息的数据。 6. 如果需要取消某个订阅,可以使用pubsub.unsubscribe方法。具体的取消订阅的操作可以根据实际需求进行编写。 综上所述,以上是在Vue中使用pubsub-js的步骤。通过这些步骤,你可以在Vue项目中实现消息发布订阅功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue学习十六消息订阅发布pubsub-js)](https://blog.csdn.net/qq_29107721/article/details/125349357)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [一、PubSubVue使用方式](https://blog.csdn.net/weixin_52834606/article/details/124636609)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值