vue总线机制(bus)知识点详解


Posted in Javascript onMay 10, 2020

vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同。

bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。

vuex适用中大型项目、数据在多组件之间公用的情况。

简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些:

vue总线机制(bus)知识点详解

//main.js
 
Vue.prototype.bus = new Vue();
new Vue({
 render: h => h(App)
  ...
}).$mount('#app');
/*
*通过把一个vue实例赋于Vue构造函数原型上的一个属性bus(当然起任何名称都是可以的)
*而每个Vue实例都是有$emit和$on方法的
*由于bus属性在Vue原型上,根据原型链查找规则,在页面中我们就可以通过 this.bus.$emit 和 
*this.bus.$on来进行跨组件通信了
*/
//导航栏组件中
//点击事件发生时发布一个事件
this.bus.$emit('even-name',args1, arg2 , ...)
 
//这里我们可以把点击导航的相关信息携带出去
//路由显示页面中
this.bus.$on('event-name', (...args) => {
  //根据参数来进行路由跳转
})

这个事件监听 和 路由跳转的逻辑我们可以弄成一个mixins进行复用。到这样就完成了。

但是这样还是有点麻烦,每个页面都需要引入mixins,有没有更好的办法呢?答案是肯定的。我们项目导航栏是通过路由meta循环出来的,每项有对应导航栏的路由,结构如下:

{
  path: '/xxxx',
  component: xxxx,
  meta: [
   {
    name: '导航1'
   }, 
   {
    name: '导航2',
    url: '我是导航2的路由'
   },
   {
    name: '导航3',
    url: '我是导航3的路由'
   },
   {
    name: '导航4',
   }
  ]
 },

在思索时我忽然发现每个导航栏的index、导航栏长度length、及router.go方法之间有一个规律,那就是我们可以把index + 1 - length作为router.go的参数,从而不用再关心query参数了,而且只需要在导航栏组件操作一次就可以了,完美!

//导航栏组件点击事件处理函数中
 
if (url) {
  const meta = this.$route.meta;
  this.$router.go(index + 1 - meta.length)
}

知识点补充:

将Bus注入到Vue根对象中

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
  el:'#app',
 data:{


Bus
  }


})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

以上就是vue总线机制(bus)知识点详解的详细内容,更多关于vue中总线机制的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
Json解析的方法小结
Jun 22 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
vue路由跳转传递参数的方式总结
May 10 #Javascript
javascript单张多张图无缝滚动实例代码
May 10 #Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 #Javascript
js实现文章目录索引导航(table of content)
May 10 #Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 #Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 #Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
性能服装:HYLETE
2018/08/14 全球购物
如何使用PHP session
2015/04/21 面试题
白酒业务员岗位职责
2013/12/27 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
活动总结书
2014/05/08 职场文书
教师演讲稿大全
2014/05/16 职场文书
法制教育演讲稿
2014/09/10 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
死亡赔偿协议书
2015/01/28 职场文书
人事局接收函
2015/01/31 职场文书
让世界充满爱观后感
2015/06/10 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Golang实现可重入锁的示例代码
2022/05/25 Golang