精华内容
下载资源
问答
  • 主要介绍了vue2.0s中eventBus实现兄弟组件通信的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 手写 EventBusVue

    2021-09-01 17:21:40
    Vue 中事件相关的方法 vm.$on、vm.$off、vm.$once、vm.$emit,通过eventsMinxin方法挂在 Vue的原型上。 定义一个事件总线对象 events 管理所有事件: 每次执行$on的时候,都会在 events 中对应事件的回调函数列表...

    Vue 中事件相关的方法 vm.$on、vm.$off、vm.$once、vm.$emit,通过eventsMinxin方法挂在 Vue的原型上。

    定义一个事件总线对象 events 管理所有事件:
        每次执行$on的时候,都会在 events 中对应事件的回调函数列表中添加一项;
        每次执行$emit的时候,会执行 events 中对应事件的所有函数。

    /*
        this.events = {
            event1:[callback1,callback2,…………],
            event2:[callback1,callback2,…………],...
        }
    */
    class EventBus {
        constructor() {
            // 事件总线对象
            this.events = {};
        }
    
        // 监听 发布,  event事件可以为数组和字符串,fn为事件触发时的回调函数
        $on(event, fn) {
            if (Array.isArray(event)) {
                for (let i = 0; i < event.length; i++) {
                    // 监听数组中的每一个事件
                    this.$on(event[i], fn)
                }
            } else {
                // 该事件的事件队列 如果存在就直接push进去fn,如果不存在就先创建为空数组
                (this.events[event] || (this.events[event] = [])).push(fn);
            }
        }
    
        // 触发事件event,...args为调用时的传参
        $emit(event, ...args) {
            const cbs = this.events[event];
            cbs.forEach(fn => {
                try {
                    fn(...args);
                } catch (e) {
                    new Error('error')
                }
            });
        }
    
        // 清除某个event事件的fn
        $off(event, fn) {
            // 不传具体参数event时,就清空所有事件
            if (!arguments.length) this.events = {};
    
            if (Array.isArray(event)) {
                for (let i = 0; i < event.length; i++) {
                    // 清除数组中的每一个事件
                    this.$off(event[i], fn)
                }
                return;
            }
    
            const cbs = this.events[event];
            if (!cbs) return;
            // 如果不传参数fn,就清除该事件的所有回调函数
            if (arguments.length == 1) this.events[event] = null;
            else {
                // 该事件的事件队列
                let n = cbs.length;
                while (n--) {
                    if (cbs[n] === fn || cbs[n].fn === fn) {
                        cbs.splice(n, 1);
                        break;
                    }
                }
            }
        }
    
        // 注册监听事件和处理函数,触发一次后销毁,  event为字符串
        $once(event, fn) {
            const self = this;
            // 给fn做一层处理,使得触发时先清除
            function handler() {
                self.$off(event, handler);
                fn.apply(self, arguments);  //emit触发时会传入参数args
            }
            handler.fn = fn;  //off清除时的判断依据
    
            this.$on(event, handler);
        }
    }
    
    const eb = new EventBus();
    eb.$on('say', function (msg) {
        console.log(msg);
    });
    eb.$emit('say', 'Hello world');

    展开全文
  • eventBusvue中的使用

    千次阅读 2020-06-09 16:42:14
    1、初始化——全局定义 全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上. //main.js //方式一 Vue.prototype.$EventBus = new Vue(); //方式二 window.eventBus = new Vue(); 2、触发...

          在vue项目中,父子组件间的通讯很方便。但兄弟组件或多层嵌套组件间的通讯,就会比较麻烦。这时,使用eventBus通讯,就可以很便捷的解决这个问题。

          eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。

    1、初始化——全局定义

          全局定义,可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上.

    //main.js
    //方式一
    Vue.prototype.$EventBus = new Vue();
    //方式二
    window.eventBus = new Vue();

    2、触发事件

    //使用方式一定义时
    this.$EventBus.$emit('eventName', param1,param2,...)
    //使用方式二定义时
    EventBus.$emit('eventName', param1,param2,...)
    

    3、监听事件

    //使用方式一定义时
    this.$EventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行的代码
    })
    //使用方式二定义时
    EventBus.$on('eventName', (param1,param2,...)=>{
        //需要执行的代码
    })

    4、移除监听事件

          为了避免在监听时,事件被反复触发,通常需要在页面销毁时移除事件监听。或者在开发过程中,由于热更新,事件可能会被多次绑定监听,这时也需要移除事件监听。

    //使用方式一定义时
    this.$EventBus.$off('eventName');
    //使用方式二定义时
    EventBus.$off('eventName');

     

    展开全文
  • vue 中使用eventbus

    千次阅读 2019-02-19 15:07:13
    公司的项目中应用了vuex,但是发现在commit的时候,消耗了100多毫秒的时间,所以研究下eventbus 父子组件通讯原则 为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时...

    公司的项目中应用了vuex,但是发现在commit的时候,消耗了100多毫秒的时间,所以研究下eventbus

    父子组件通讯原则

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

    在<Vue组件通讯>一文有详细介绍过这部分,单这套通讯原则对于兄弟组件之间的数据通讯就有问题,在Vue中有其他的方式来处理兄弟组件之间的数据通讯,比如vuex这样的库,因为项目的问题,我们考虑Vue的事件总线,即"EventBus"

    EventBuS简介

    EventBus又称事件总线,在Vue中可以使用EventBus来作为沟通桥梁的概念,就像是所有事件共用相同的事件中心,可以向该中心发送事件或接收事件,所有组件都可以上下平行的通知其他组件,但太方便若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次

    如何使用EventBus

    在Vue的项目中怎么使用 EventBus 来实现组件之间的数据通讯呢?具体可以通过下面几个步骤来完成。

    初始化

    首先你需要做的是创建事件总线并将其导出,以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种,新创建一个 .js 文件,比如 event-bus.js

    // event-bus.js
    
    
    import Vue from 'vue'
    export const EventBus = new Vue()
    

    你需要做的只是引入 Vue 并导出它的一个实例(在这种情况下,我称它为 EventBus )。实质上它是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。

    另外一种方式,可以直接在项目中的 main.js 初始化 EventBus

    // main.js
    Vue.prototype.$EventBus = new Vue()
    

    注意,这种方式初始化的 EventBus 是一个 全局的事件总线 。稍后我们会花点时间专门聊一聊全局的事件总线。

    现在我们已经创建了 EventBus ,接下来你需要做到的就是在你的组件中加载它,并且调用同一个方法,就如你在父子组件中互相传递消息一样。

    发送事件

    假设你有两个子组件: DecreaseCountIncrementCount ,分别在按钮中绑定了 decrease()increment() 方法。这两个方法做的事情很简单,就是数值递减(增) 1 ,以及角度值递减(增) 180 。在这两个方法中,通过 EventBus.$emit(channel: string, callback(payload1,…)) 监听 decreased (和 incremented )频道。

    <!-- DecreaseCount.vue -->
    <template>
        <button @click="decrease()">-</button>
    </template>
    
    <script> import { EventBus } from "../event-bus.js";
        export default {
            name: "DecreaseCount",
            data() {
                return {
                    num: 1,
                    deg:180
                };
            },
            methods: {
                decrease() {
                    EventBus.$emit("decreased", {
                        num:this.num,
                        deg:this.deg
                    });
                }
            }
        }; 
    </script>
    
    <!-- IncrementCount.vue -->
    <template>
        <button @click="increment()">+</button>
    </template>
    
    <script> import { EventBus } from "../event-bus.js";
        export default {
            name: "IncrementCount",
            data() {
                return {
                    num: 1,
                    deg:180
                };
            },
            methods: {
                increment() {
                    EventBus.$emit("incremented", {
                        num:this.num,
                        deg:this.deg
                    });
                }
            }
        };
     </script>
    

    上面的示例,在 DecreaseCountIncrementCount 分别发送出了 decreasedincremented频道。接下来,我们需要在另一个组件中接收这两个事件,保持数据在各组件之间的通讯。

    接收事件

    现在我们可以在组件 App.vue 中使用 EventBus.$on(channel: string, callback(payload1,…))监听 DecreaseCountIncrementCount 分别发送出了 decreasedincremented 频道。

    <!-- App.vue -->
    <template>
        <div id="app">
            <div class="container" :style="{transform: 'rotateY(' + degValue + 'deg)'}">
                <div class="front">
                    <div class="increment">
                        <IncrementCount />
                    </div>
                    <div class="show-front"> {{fontCount}} </div>
                    <div class="decrement">
                        <DecreaseCount />
                    </div>
                </div>
    
                <div class="back">
                    <div class="increment">
                        <IncrementCount />
                    </div>
                    <div class="show-back"> {{backCount}} </div>
                    <div class="decrement">
                        <DecreaseCount />
                    </div>
                </div> 
            </div>
        </div>
    </template>
    
    <script>
        import IncrementCount from "./components/IncrementCount";
        import DecreaseCount from "./components/DecreaseCount";
        import { EventBus } from "./event-bus.js";
        export default {
            name: "App",
            components: {
                IncrementCount,
                DecreaseCount
            },
            data() {
                return {
                    degValue:0,
                    fontCount:0,
                    backCount:0
                };
            },
            mounted() {
                EventBus.$on("incremented", ({num,deg}) => {
                    this.fontCount += num
                    this.$nextTick(()=>{
                        this.backCount += num
                        this.degValue += deg;
                    })
                });
                EventBus.$on("decreased", ({num,deg}) => {
                    this.fontCount -= num
                    this.$nextTick(()=>{
                        this.backCount -= num
                        this.degValue -= deg;
                    })
                });
            }
        }; 
    </script>
    

    最终得到的效果如下:

    最后用一张图来描述示例中用到的 EventBus 之间的关系:

    如果你只想监听一次事件的发生,可以使用 EventBus.$once(channel: string, callback(payload1,…))

    移除事件监听者

    如果想移除事件的监听,可以像下面这样操作:

    import { eventBus } from './event-bus.js'
    EventBus.$off('decreased', {})
    

    你也可以使用 EventBus.$off(‘decreased’) 来移除应用内所有对此事件的监听。或者直接调用EventBus.$off() 来移除所有事件频道, 注意不需要添加任何参数

    上面就是 EventBus 的使用方式,是不是很简单。上面的示例中我们也看到了,每次使用 EventBus 时都需要在各组件中引入 event-bus.js 。事实上,我们还可以通过别的方式,让事情变得简单一些。那就是创建一个全局的 EventBus 。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus

    全局EventBus

    全局EventBus,虽然在某些示例中不提倡使用,但它是一种非常漂亮且简单的方法,可以跨组件之间共享数据。

    它的工作原理是发布/订阅方法,通常称为 Pub/Sub

    这整个方法可以看作是一种设计模式,因为如果你查看它周围的东西,你会发现它更像是一种体系结构解决方案。我们将使用普通的JavaScript,并创建两个组件,并演示EventBus的工作方式。

    让我们看看下图,并试着了解在这种情况下究竟发生了什么。

    我们从上图中可以得出以下几点:

    • 有一个全局EventBus
    • 所有事件都订阅它
    • 所有组件也发布到它,订阅组件获得更新
    • 总结一下。所有组件都能够将事件发布到总线,然后总线由另一个组件订阅,然后订阅它的组件将得到更新

    在代码中,我们将保持它非常小巧和简洁。我们将它分为两部分,将展示两个组件以及生成事件总线的代码。

    创建全局EventBus

    全局事件总线只不过是一个简单的 vue 组件。代码如下:

    var EventBus = new Vue();
    
    Object.defineProperties(Vue.prototype, {
        $bus: {
            get: function () {
                return EventBus
            }
        }
    })
    

    现在,这个特定的总线使用两个方法 $on$emit 。一个用于创建发出的事件,它就是$emit ;另一个用于订阅 $on

    var EventBus = new Vue();
    
    this.$bus.$emit('nameOfEvent',{ ... pass some event data ...});
    
    this.$bus.$on('nameOfEvent',($event) => {
        // ...
    })
    

    现在,我们创建两个简单的组件,以便最终得出结论。

    接下来的这个示例中,我们创建了一个 ShowMessage 的组件用来显示信息,另外创建一个 UpdateMessage 的组件,用来更新信息。

    UpdateMessage 组件中触发需要的事件。在这个示例中,将触发一个 updateMessage 事件,这个事件发送了 updateMessage 的频道:

    <!-- UpdateMessage.vue -->
    <template>
        <div class="form">
            <div class="form-control">
                <input v-model="message" >
                <button @click="updateMessage()">更新消息</button>
            </div>
        </div>
    </template>
    <script>
    export default {
            name: "UpdateMessage",
            data() {
                return {
                    message: "这是一条消息"
                };
            },
            methods: {
                updateMessage() {
                    this.$bus.$emit("updateMessage", this.message);
                }
            },
            beforeDestroy () {
                $this.$bus.$off('updateMessage')
            }
        };
     </script>
    

    同时在 ShowMessage 组件中监听该事件:

    <!-- ShowMessage.vue -->
    <template>
        <div class="message">
            <h1>{{ message }}</h1>
        </div>
    </template>
    
    <script> 
    export default {
            name: "ShowMessage",
            data() {
                return {
                    message: "我是一条消息"
                };
            },
            created() {
                var self = this
                this.$bus.$on('updateMessage', function(value) {
                    self.updateMessage(value);
                })
            },
            methods: {
                updateMessage(value) {
                    this.message = value
                }
            }
        }; 
    </script><
    

    最终的效果如下:

    从上面的代码中,我们可以看到 ShowMessage 组件侦听一个名为 updateMessage 的特定事件,这个事件在组件实例化时被触发,或者你可以在创建组件时触发。另一方面,我们有另一个组件UpdateMessage ,它有一个按钮,当有人点击它时会发出一个事件。这导致订阅组件侦听发出的事件。这产生了 Pub/Sub 模型,该模型在兄弟姐妹之间持续存在并且非常容易实现。

    总结

    本文主要通过两个实例学习了Vue中有关于 EventBus 相关的知识点。主要涉及了 EventBus 如何实例化,又是怎么通过 $emit 发送频道信号,又是如何通过 $on 来接收频道信号。最后简单介绍了怎么创建全局的 EventBus 。从实例中我们可以了解到, EventBus 可以较好的实现兄弟组件之间的数据通讯。

    展开全文
  • eventBus vue事件总线

    2020-09-29 16:42:58
    eventBusvue事件总线,所有的组件都可以将自定义事件发布到事件总线,然后在我们所需要的组件中订阅他 1.首先创建一个eventBus.js import Vue from 'vue' // 全局事件总线 const eventBus = new Vue() export ...

    eventBus是vue事件总线,所有的组件都可以将自定义事件发布到事件总线,然后在我们所需要的组件中订阅他

    1.首先创建一个eventBus.js

    import Vue from 'vue'
    // 全局事件总线
    const eventBus = new Vue()
    
    export default eventBus
    

    2.在main.js全局引入

    import eventBus from "。。。。。。/eventBus";
    Vue.prototype.$eventBus = eventBus;
    

    3.组件A中发出事件 $emit

    this.$eventBus.$emit("aaa",1)
    

    4.组件B中订阅它 $on

    this.$eventBus.$on("aaa",res=>{
    })
    

    移除事件 $off

    this.$eventBus.$off("aaa")
    
    展开全文
  • Vue3不支持eventBus

    千次阅读 2020-09-21 10:39:05
    在2.x中,Vue 实例可以用事件API($on、$off 和 $once)强制附加的处理代码逻辑。这用于创建监听器功能,以创建在整个应用程序中使用的全局事件监听器: // eventHub.js const eventHub = new Vue() export ...
  • vue3中已经移除了emit,emit,emit,on等方法,Eventbus通讯使用的是发布订阅的设计模式,可以自己实现一个。下面我用的是typescript // 为保持和vue2版本中使用bus一致,emit,on,off前面都加了$ class Bus { list: { ...
  • vue自动销毁的eventBus

    2021-07-13 16:00:10
    import Vue from 'vue' // 存储所有的事件 const EventStore = {} const Bus = new Vue() const destoryHandler = function() { // this 为调用此方法的vue组件 const currentEventObj = EventStore[this._uid] if ...
  • Vue2实现EventBus思路

    2021-03-18 17:10:10
    在某个工具目录下面新建一个文件eventBus.js,内容如下: const install = (Vue) => { const Bus = new Vue() Vue.prototype.$bus = Bus } export default { install } 之后在main.js里面引入
  • vue实现一个eventBus

    2020-04-29 14:17:40
    eventBus应该有些听过,其实就是一个事件发布订阅的功能。vue提供了实例方法事件,就是on、on...Vue.prototype.$eventBus = new Vue(); 我在home页面注册了一个事件: this.$eventBus.$on('home', (msg) => { c...
  • Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式,所以代码里需要有一个地方注册事件,有另外...
  • 1.建立一个eventBus.ts(或者js文件) import Vue from 'vue' export default new Vue() 2.有值的页面 import eventBus from 'eventBus' eventBus.$emit('updateName', 值) 3.需要传过来值的页面 import eventBus ...
  • 本篇文章主要介绍了vue 组件之间使用eventbus传值。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue篇之事件总线(EventBus

    万次阅读 多人点赞 2018-10-02 19:33:16
    许多现代JavaScript框架和库的核心概念是能够将...通过前面一段时间的学习,Vue组件数据通讯常常会有父子组件,兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。 父子组件通讯原则 为了提高组件的...
  • Vue.prototype.$bus = new Vue(); 2.子组件(需要发出消息的组件) this.$bus.$emit("aaa") 3.父组件(需要接收消息的组件) this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) ... ...
  • vue 组件之间使用eventbus传值

    万次阅读 2017-07-15 03:40:19
    eventbus vue vue-cli 组件传值
  • VUE源码分析之eventBus原理

    千次阅读 2019-09-24 10:12:05
    VUEeventBus可以用来进行任何组件之间的通信,我们可以把eventBus当成一个管道,这个管道两端可以接好多组件,两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例,实例中的$on, $off, $emit方法来实现此...
  • 一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,...关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。 先给你们看一下我一开始的
  • vue实现全局eventBus(全局事件总线)

    千次阅读 2021-01-04 10:44:50
    Vue原型对象上有3个事件处理的方法: $ on() 、 $ emit() 、$ off() 组件对象的原型对象是一个vm对象: 组件对象可以直接访问Vue原型对象上的方法 实现原理 创建vm作为全局事件总线对象(main.js): Vue.prototype...
  • import Vue from 'vue' export default new Vue() 在需要向外传递值的组件/页面中写: import eventBus form '../bus.js' methods:{ click(){ eventBus.$emit('自定义事件名',参数) } } 在接受值的组件...
  • 大家还在吗有一周时间不见了吧,那么这周讲一些什么呢,不知道你们是否还记得我上周说过的这周要讲eventbus,其实eventbus还是有bug的,那么废话不多说直接开始正题 eventbus重复触发的bug 记得上周我讲过的demo吗...
  • 本文首发在个人的博客上,地址:重庆... 由于之前一直在工作中用的mui这个前端框架,框架自己封装有实现这个需求的方法,所以实现就很简单,但是现在公司项目用的是Vue,首先想到的方法可能就是用localstorage或者Vu...
  • 我以为eventBus是专门处理兄弟组件之间通信的,但是实际上,eventBus是专门处理同一个路由下的复杂组件之间通信的。 如果涉及夸路由的组件通信。可以考虑利用$route对象传参或者Vuex vuex完美解决 由于涉及v-model,...
  • Vue中可以使用EventBus来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护...
  • vue EventBus

    2019-08-01 17:25:15
    要创建新的Vue CLI应用程序,请运行以下命令。确保已安装Vue CLI。 //安装Vue CLI,如果你还没安装它 $ npm install -g @ vue / cli //创建Vue App $ vue init webpack <project-name>...
  • 通常适用于兄弟组件传值 ...export const EventBus = new Vue() 在局部组件引入 import { EventBus } from "/src/event-bus.js"; 注意,在组件销毁时需要先进行关闭监听! beforeDestroy() { EventBus.$off("aMsg
  • 使用eventBus实现兄弟组件的通信,使用以下三个文件,完成两个子组件(兄弟组件)之间的通信 文件名称 使用情况 FirstSon.vue 第一个子组件,作为接收方:接收消息 About.vue 第二个子组件,作为发送方:...
  • vue - EventBus

    2020-02-08 18:25:30
    vue – 事件总线 EventBus EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为组件传递数据的桥梁的,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地...
  • VueEventBus详解

    2020-10-03 18:31:42
    一、概述 Vue组件之间的数据共享问题,针对不同情景,有不同的解决方案。如简单父子组件通信,可以使用props,项目比较复杂,则组件通信可以使用Vuex。对于简单的非父子组件通信,没...Vue.prototype.$eventBus = n

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,961
精华内容 2,384
关键字:

eventbusvue

vue 订阅