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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
Vue中props的详解
May 16 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
React中的Context应用场景分析
Jun 11 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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
可以将word转成html的js代码
2010/04/11 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
增大python字体的方法步骤
2020/07/05 Python
Python 可视化神器Plotly详解
2020/12/26 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
售后客服个人自我评价
2014/09/14 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android