vue通信方式EventBus的实现代码详解

2024-04-16 12:50:20

vue通信方式有很多，项目中用的比较多的的有 pros、vuex、$emit/$on 这3种，还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。很多时候我们都是只会使用api，而懂得原理以及实现，但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的。所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下。这也是自己学到大佬的的东西后并在此记录（转载）一下。

class EventBus{
    constructor(){
      this.event=Object.create(null);
    };
    //注册事件
    on(name,fn){
      if(!this.event[name]){
        //一个事件可能有多个监听者
        this.event[name]=[];
      };
      this.event[name].push(fn);
    };
    //触发事件
    emit(name,...args){
      //给回调函数传参
      this.event[name]&&this.event[name].forEach(fn => {
        fn(...args)
      });
    };
    //只被触发一次的事件
    once(name,fn){
      //在这里同时完成了对该事件的注册、对该事件的触发，并在最后并取消该事件。
      const cb=(...args)=>{
        //触发
        fn.apply(this,args);
        //取消
        this.off(name,fn);
      };
      //监听
      this.on(name,cb);
    };
    //取消事件
    off(name,offcb){
      if(this.event[name]){
        let index=this.event[name].findIndex((fn)=>{
          return offcb===fn;
        })
        this.event[name].splice(index,1);
        if(!this.event[name].length){
          delete this.event[name];
        }
      }
    }
  }

以上代码用的是发布订阅模式。

总结

以上所述是小编给大家介绍的vue通信方式EventBus的实现代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

详解vue 组件之间使用eventbus传值

对于前端的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知道怎么去使用数据当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改.然而,有时候我们的项目并没有复杂到需要用上Vuex.,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需
详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的官方推荐方式有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu
vue2.0s中eventBus实现兄弟组件通信的示例代码

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式

本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件给子组件传子,使用props //父组件:parent.vue <template> <div> <child :vals = "msg"></child> </div> </template> <script&
vue2.0组件之间传值、通信的多种方式(干货)

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.
vue采用EventBus实现跨组件通信及注意事项小结

EventBus EventBus是一种发布/订阅事件设计模式的实践. 在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex. 挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event
Vue组件通信的四种方式汇总

前言众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信非父子组件的eventBus通信利用本地缓存实现组件通信 Vuex通信第一种通信方式:父子组件通信父组件向子组件传递数据父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen
vue中eventbus被多次触发以及踩过的坑

一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的时候可以通过路由的params或者query去传参数,或者大型数据可以用vuex来处理,很遗憾我到现在还没有做很大型的项目,所以还没有用过vuex,接下来会学习一下.) 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗.于是,我就很愉快地进行了.关于v
vue通信方式EventBus的实现代码详解

vue通信方式有很多,项目中用的比较多的的有 pros.vuex.$emit/$on 这3种,还有 provide/inject (适合高阶组件). $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref.eventBus 等这3种方式.很多时候我们都是只会使用api,而懂得原理以及实现,但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的.所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下.这也是自己学到大佬的的东
Vue创建头部组件示例代码详解

Vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
vue动态注册组件实例代码详解

写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例:  <component v-bind:is="currentView"></component> 详见vue API中关于
vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ name | Upper }}  <div v-bind:id="martin | Upper
Vue中使用vux配置代码详解

一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装
封装一下vue中的axios示例代码详解

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (
Vue使用video.js的代码详解

一.下载video.js npm install --save-dev video.js 二.在vue脚手架中引入video.js(main.js引入) import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video //引入Video播放器三.实例化了视频.js播放器,并在上销毁了它 <template> <div> <video ref=&quo
Vue数字输入框组件示例代码详解

数字输入框组件实现功能:只允许输入数字(包括小数).允许设置初始值.最大值.最小值. 为了方便,这里选用Vue的 cli-service 实现快速原型开发首先template部分代码 <template> <div class="demo"> <input-number v-model="value" :max="10" :min="0"></input-number> &l
vue中使用rem布局代码详解

1.npm i amfe-flexible 2.import 'amfe-flexible' 然后再,安装postcss-px2rem插件 npm i postcss-px2rem 在package.json中配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 26.7 } } } 在vue项目中使用
vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

完整效果演示首先完成这个伪搜索框 src/components/search/index.vue (通用搜索框组件) <template> <div class="mine-search-box-wrapper"> <i class="iconfont icon-search"></i> <div class="mine-search-box" v-if="fake"&g

vue通信方式EventBus的实现代码详解

相关推荐

随机推荐