Vue eventBus事件总线封装后再用的方式

目录
  • 前言
  • 空vue实例构建的事件总线
  • 简单的方式
  • 复杂又简单的方式
  • 总结

前言

现在的项目中是不是在使用 eventbus 的时候,还有很多人都是直接创建一个vue 实例直接使用的,哪里需要哪里引入,而没有简单的处理下。接下来就先说下这种方式。

空vue实例构建的事件总线

在改造一个项目的时候就发现,里面的 bus.js 文件中就是这么处理的。两行代码搞定。

import Vue from "vue";
export default new Vue()

使用的时候,就没那么简单了,有这么一个空的容器,在需要传值的组件里就得引入这个文件。然后通过 bus.on()绑定事件,通过bus.on() 绑定事件,通过 bus.on()绑定事件,通过bus.emit()进行分发事件。

import bus from'@/utils/bus'
// 绑定事件
bus.$on('event',()=>{....})

// 监听事件
bus.$emit('event',this.tasks)

这种方式使用起来也简单但也不太方便,毕竟到处都要引入下,那有没有什么办法可以解决呢。继续...

简单的方式

先来个简单的吧,虽然看上去有点不太习惯,但的确也挺好使的,而且直接挂载到vue实例上,哪里用哪里直接 this 即可,相对来说方便多了,不用到处引入文件了。挂载方式如下:

new Vue({
  beforeCreate() {
    // 尽量早地执行挂载全局事件总线对象的操作
    Vue.prototype.$bus = this;
  },
  router,
  store,
  render: h => h(App)
}).$mount('#app');

这种方式虽然挂载简单,但是使用上还是有点不能尽如人意,不信你看:

// 绑定事件
this.$bus.$on('send', ()=>{ // 使用事件 });

// 分发事件
this.$bus.$emit('send', 'emit');

猛地一看,这不挺好的么,挺简单的啊!可是我有洁癖怎么办,我有强迫症怎么办,我就不想看到两个 $符怎么办我就只想要下面的这种方式的:

// 绑定事件
this.$bus.on('send', ()=>{ // 使用事件 });

// 分发事件
this.$bus.emit('send', 'emit');

那你说,人家都是 $on$emit的用的,怎么就不行了啊,实在不行就自己改造个吧,说干就干,who 怕 who,安排!

复杂又简单的方式

先构思下,想要个什么样效果的,比如,我不想要用的时候都要引入下文件,要一次引入,处处可用; 我不想要两个 $ 的调用方式,或者说可以随心情的使用; 再者通过Vue对象也可以直接使用。

思路大概理了理,那就开干呗,简单干脆点,直接上代码!

'use strict';
function VueBus(Vue) {
  let bus = new Vue();

  Object.defineProperties(bus, {
    on: {
      get() {
        return this.$on.bind(this);
      }
    },
    once: {
      get() {
        return this.$once.bind(this);
      }
    },
    off: {
      get() {
        return this.$off.bind(this);
      }
    },
    emit: {
      get() {
        return this.$emit.bind(this);
      }
    }
  });

  Object.defineProperty(Vue, 'bus', {
    get() {
      return bus;
    }
  });

  Object.defineProperty(Vue.prototype, '$bus', {
    get() {
      return bus;
    }
  });
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(VueBus);
  }

  return bus;
}

export default VueBus;

来看看使用方式吧,是不是跟想象的一样简单,在 main.js 中引入,并通过 vue.use() 注入进来,加载方式就这么简单。

import EventBus from '@/libs/bus';

Vue.use(EventBus);

使用上更灵活了,想怎么用就怎么用,支持以下几种方式,至于$off$once使用上通 $on$emit一样。

// 绑定事件
this.$bus.on('send', this.handleSend); // 推荐
this.$bus.$on('send', this.handleSend);
Vue.bus.on('send', this.handleSend);
Vue.bus.$on('send', this.handleSend);

// 分发事件
this.$bus.emit('send', ''); // 推荐
this.$bus.$emit('send', 'emit');
Vue.bus.emit('send', 'emit');
Vue.bus.$emit('send', 'emit');

上面这几种方式均可。是不是更灵活了呢。想怎么用就怎么用,再也不用担心会写错调用方式了。

总结

到此这篇关于Vue eventBus事件总线封装后再用的文章就介绍到这了,更多相关Vue eventBus事件总线封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-06-22

Vue中事件总线(eventBus)的深入详解及使用

目录 1.简介 2.使用 安装及引入 在组件中使用 补充:移除监听事件 总结 1. 简介 Vue 组件中常见的有:父子组件通信.兄弟组件通信.而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件. 今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢? 如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信. eventBus

Vue EventBus自定义组件事件传递

前言 组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率. 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互.所以在这里为大家总结两种组件数据交互的方式:EventBus和利用Vuex框架进行状态管理. 我会通过两种不同的交互方式,它们对于父子组件间数据交互和兄弟组件间数据交互. 由于篇幅关系,本文主要介绍EventBus进行数据消息传递:关于运用Vuex框架进行状态管理在下一篇文章中介绍. 案例介绍 本章节

vue 封装自定义组件之tabal列表编辑单元格组件实例代码

vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内

浅谈angular2子组件的事件传递(任意组件事件传递)

angular2子组件的事件传递 angular2有很多组件组成,画面由很多路由,导致事件的传递很"笨拙",本组的技术负责人发现了任意组件传递事件的这个方法,教会了我,我做个笔记. 项目情况: 画面结构复杂,路由数目偏多,组件数目多,嵌套复杂.业务要求:任何出现人名的地方,点击人名,直接打开和这个人的聊天画面 以前用angular2官网给的烹饪技巧基本解决90%的需求,当然这个如果是用Input,Output也可以,但是那样的话,结构将是混沌状态. 附:angluar2的组件通讯的传送

Vue的自定义组件不能使用click方法的解决

先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>' }) Vue.compone

vue swipe自定义组件实现轮播效果

本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl

vue.js自定义组件directives的实例代码

自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行

vue中各组件之间传递数据的方法示例

前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

vue在自定义组件中使用v-model进行数据绑定的方法

本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿

vue.js自定义组件实现v-model双向数据绑定的示例代码

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,