DDR爱好者之家

vue总线机制(bus)知识点详解
站长资源 2024/11/24 佚名
21 1538
DDR爱好者之家 Design By 杰米

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中总线机制的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米