温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中的eventBus怎么使用

发布时间:2022-03-07 16:28:56 来源:亿速云 阅读:252 作者:iii 栏目:开发技术

本篇内容主要讲解“Vue中的eventBus怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中的eventBus怎么使用”吧!

    1. 简介

    Vue 组件中常见的有:父子组件通信、兄弟组件通信。而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。

    今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢?

    如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信。

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

    2. 使用

    可以声明一个全局变量来使用事件中心,但如果在使用 webpack 之类的模块系统,这显然不合适。
    每次使用都手动 import 进来也很不方便,所以本文使用 vue-bus 插件。

    vue-bus npm地址

    vue-bus github地址

    安装及引入

    npm install vue-bus --save

    如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装 vue-bus:

    // main.js
    import Vue from 'vue';
    import VueBus from 'vue-bus';
    Vue.use(VueBus);

    在组件中使用

    假设有两个Vue组件需要通信 ,在 A 组件的按钮上面绑定了点击事件发送一则消息,想通知 B 组件。

    // A 组件
    <template>
      <div class="wrap">
        <button @click="sendMsg">触发</button>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          Amsg:'我是来自A组件的信息',
        }
      },
      methods:{
        sendMsg(){
          this.$bus.emit('changeMsg', this.Amsg );
          this.$bus.emit('doOnce','我只会触发一次');
        }
      },
    }
    </script>
    // B 组件
    <template>
      <div>
        <h4>{{Bmsg}}</h4>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return {
          Bmsg:'我是B组件',
        }
      },
      methods:{
        getMsg(msg){
          this.Bmsg = msg;
          console.log(msg);
        }
      },
      created(){
        /*
        * 接收事件
        * 这种写法也体现了:A 组件调用 B 组件中的方法。如果只是传递数据,可参考如下简化写法:
        * this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg });
    	*/ 
        this.$bus.on('changeMsg', this.getMsg);
        // 此侦听器只会触发一次
        this.$bus.once('doOnce', (txt) => { console.log(txt) });
      },
      // 组件销毁时,移除EventBus事件监听
      beforeDestroy() {
        this.$bus.off('changeMsg', this.addTodo);
      },
    }
    </script>

    当我们点击5次触发按钮时,效果如下:

    Vue中的eventBus怎么使用

    补充:移除监听事件

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

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

    到此,相信大家对“Vue中的eventBus怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI