在之前我们只用过父传子,子传父进行传数据,这时候当组件嵌套比较深或比较复杂的情况,这时候就用到了事件总线 (EventBus) 如何理解事件总线呢,你可以理解为用来传输数据的一条线 注意点:有组件发布事件后 剩余的所有组件都可以进行监听事件 一、使用EventBus 1. 创建事件总线 main.js import Vue from 'vue' /...
Vue中的全局事件监听是指在整个Vue应用中可以监听和触发的事件。Vue提供了一个全局事件总线(EventBus)来实现全局事件的监听与触发。 全局事件监听主要包含以下几个步骤: 创建全局事件总线:在Vue应用的任意组件中,可以创建一个空的Vue实例作为全局事件总线,用来充当事件的中转站。通常在main.js文件中创建: // main.js...
console.log("School",this)//监听当前实例上自定义事件hello//this.x.$on("hello",(data)=>{//console.log("我是School组件,收到了数据:",data)//})this.$bus.$on("hello",(data)=>{ console.log("我是School组件,收到了数据:",data)this.name=data }) }, beforeDestroy() {//解绑自定义事件...
Vue 事件总线是一种在 Vue 组件之间传递事件和数据的机制。它允许不同的组件在不直接引用对方的情况下进行通信。事件总线通常是一个空的 Vue 实例,用于在组件之间触发和监听自定义事件。 2. 如何在 Vue 中创建事件总线实例? 在Vue 中,你可以通过创建一个新的 Vue 实例来作为事件总线。这个实例不挂载到 DOM 上...
(EventBus)可以称之为事件总线,当两个组件属于不同的两个组件分支,或者两个组件没有任何联系的时候,不想使用Vuex这样的库来进行数据通信,就可以通过事件总线来进行通信。vue事件总线就像所有组件的事件中心,在组件中,我们可以使用$emit,$on,$off分别来分发、监听、取消监听事件。
首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种,新创建一个 .js 文件,比如event-bus.js // event-bus.js import Vue from 'vue' export const EventBus = new Vue() 实质上EventBus是一个不具备DOM的组件,它具有的仅仅只是它实例方法而已,因此它...
在Vue中,每个组件都可以通过$on()方法监听事件,通过$emit()方法触发事件。但是在实际开发中,组件之间的关系可能比较复杂,父子关系不明确,或者需要在兄弟组件之间进行通信,此时使用Event bus就非常方便。 Event bus是一个空的Vue实例,可以作为中央事件总线来传递事件和数据。通过在Event bus上注册事件和触发事件,不同...
eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件。但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的 Vuex 作为状态管理中心,将通知的概念上升到共享...
创建事件 首先需要创建事件总线并将其导出,以便其它模块可以使用或者监听它。 法1、非全局事件组件 新建EventBus.js importVuefrom'vue' exportconstEventBus=newVue() 1. 2. 法2、全局事件组件 在项目中的 main.js 初始化 EventBus。在main.js添加如下一行: ...
A组件已经向全局事件总线EventBus发送了一个aMsg事件,这时B组件就可以去aMsg监听这个事件,并可以获得一些数据。 // B 组件 <template> {{Bmsg}} </template> export default { data(){ return { Bmsg:'我是B组件', } }, methods:{ getMsg(msg){ this.Bmsg = msg; console.log(msg); } }, cre...