23_全局事件总线&消息订阅与发布

本文介绍了在 Vue.js 应用中如何使用全局事件总线和 PubSub-js 库实现组件间的通信。通过在 main.js 中创建全局事件总线,并在 School 和 Student 组件中分别订阅和发布事件,展示了消息订阅与发布的流程。同时提到了 $nextTick 方法用于在 DOM 更新后执行特定操作,确保聚焦操作的正确执行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

23_全局事件总线

任意组件间通信

在这里插入图片描述

main.js

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

School.vue

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

<script>
  export default{
      name:'School', 
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      mounted(){
        this.$bus.$on('hello',(data)=>{
          console.log('我是school组件,收到了数据',data);
        })
      },
      beforeDestroy(){
        this.$bus.$off('hello')
      }
    };
   
</script>


<style>
    .demo{
        background-color: orange;
    }
</style>

student.vue

<template>
  <div>
    <h2>学生名称:{{ name }}</h2>
    <h2>学生年龄: {{ age }}</h2>
    <button @click="senStudentName">把学生名给school组件</button>
  </div>
</template>

<script>
export default {
  name: "Student", //变量 一般和文件名一样
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  mounted(){
    // console.log(this.x);
  },
  methods:{
    senStudentName(){
      this.$bus.$emit('hello',666)
    }
  }
};
</script>

<style></style>

消息订阅与发布

在这里插入图片描述

School.vue 订阅消息

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

<script>
import pubsub from 'pubsub-js'
  export default{
      name:'School', 
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      mounted(){
        // this.$bus.$on('hello',(data)=>{
        //   console.log('我是school组件,收到了数据',data);
        // })
       this.pubId= pubsub.subscribe('hello',function(msgName,data){
          console.log("有人发布了hello消息",msgName,data);
        })
      },
      beforeDestroy(){
        // this.$bus.$off('hello')
        pubsub.unsubscribe(this.pubId)
      }
    };
   
</script>


<style>
    .demo{
        background-color: orange;
    }
</style>

Student.vue 发布消息

<template>
  <div>
    <h2>学生名称:{{ name }}</h2>
    <h2>学生年龄: {{ age }}</h2>
    <button @click="senStudentName">把学生名给school组件</button>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "Student", //变量 一般和文件名一样
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  mounted(){
  },
  methods:{
    senStudentName(){
    //  console.log( this.$bus);
    pubsub.publish('hello',666)
      
    }
  }
};
</script>

<style></style>

$nextTick

在这里插入图片描述

this.$nextTick(function{
	this.$refs.inputTitle.focus()
})

### 全局事件总线的概念 全局事件总线是一种设计模式,在前端开发中用于组件之间的通信。它允许不同组件之间通过一个共享的对象传递数据或触发行为,而无需直接依赖于彼此的结构。这种机制特别适用于非父子关系的组件间通信场景。 在 Vue 中,可以通过创建一个新的 `Vue` 实例作为事件中心来实现这一功能。这个实例可以被多个组件访问并用来分发监听事件[^1]。 --- ### 全局事件总线的实现方式 #### 方法一:独立的 `eventBus.js` 文件 一种常见的做法是单独定义一个文件(如 `eventBus.js`),其中导出一个基于 `Vue` 的新实例: ```javascript // eventBus.js import Vue from &#39;vue&#39;; export const EventBus = new Vue(); ``` 在这个例子中,`EventBus` 是专门负责管理事件的一个对象。其他模块可以通过导入该对象来进行事件的注册、监听以及解绑操作。 当某个地方想要发送通知给另一个部分时,只需调用 `$emit()` 函数即可;接收方则需提前设置好对应的回调函数以便响应特定类型的信号到来[^2]。 #### 方法二:利用原型链扩展 Vue 实例 另一种方法是在应用启动阶段将当前根级 Vue 对象赋值到所有子组件可触及的位置上&mdash;&mdash;通常是附加至 `Vue.prototype` 下面作为一个属性存在: ```javascript new Vue({ router, store, render: h =&gt; h(App), beforeCreate() { Vue.prototype.$bus = this; // 安装全局事件总线 } }).$mount(&#39;#app&#39;); ``` 上述代码片段展示了如何在一个项目的入口处完成初始化工作,并使得每一个后代节点都能够轻松获取到那个唯一的中介层[$bus](https://cn.vuejs.org/v2/api/#vm-bus)[^4]. 一旦完成了这样的配置之后,任何地方都可以很方便地使用如下形式来进行交互了: - **派发事件**: 使用 `this.$bus.$emit(&#39;eventName&#39;, payload)` 来广播一条消息连同其携带的数据一起发出; - **订阅事件**: 利用 `this.$bus.$on(&#39;eventName&#39;, callbackFunction)` 注册对该类别的兴趣点作出反应的动作逻辑; - **取消监听**: 如果不再需要继续关注某些动态变化,则应该适时调用 `this.$bus.$off(&#39;eventName&#39;)`. 这种方法的好处在于不需要额外引入外部库或者重新构建新的实体出来充当桥梁角色,而是充分利用现有的框架特性达成目的[^3]。 --- ### 工作原理分析 无论是采用哪种具体手段去搭建起所谓的&ldquo;Global Event Bus&rdquo;,它们背后的核心思想都是一样的 &mdash;&mdash; 即借助观察者模式的思想让各个相互独立的部分能够间接地保持联系起来而不至于造成耦合度过高的局面发生。每当有符合条件的事情产生之时便会自动激活相应的处理程序从而达到预期效果。 简单来说就是: 1. 创建了一个特殊的 Vue 组件实例做为中央枢纽。 2. 各个业务单元通过此中枢进行信息交换而不是互相直呼姓名那样建立硬连接关系。 3. 当然最后别忘了清理资源以免内存泄漏等问题出现哦! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值