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

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

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

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

简单介绍两者的区别之后，就要介绍下我在一个项目中遇到的一个场景了，这个场景使用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中总线机制的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue2利用Bus.js如何实现非父子组件通信详解

    前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

  • Vue组件通信之Bus的具体使用

    Vue组件通信之Bus的具体使用

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也

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

    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些: //

  • Vue+Vuex实现自动登录的知识点详解

    在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • python字符串驻留机制的使用范围知识点详解

    1.字符串的长度为0和1时. 2.符合标识符的字符串. 3.字符串只在编译时进行驻留,而非运行时. 4.[-5,256]之间的整数数字. 实例 >>> str1='jiumo' >>> str2='jiumo' >>> str1 is str2 True >>> id(str1) 1979078421896 >>> id(str2) 1979078421896 知识点扩充: 驻留时机 所有长度为 0 和长度为 1 的

  • Spring的事件机制知识点详解及实例分析

    同步事件和异步事件 同步事件: 在一个线程里,按顺序执行业务,做完一件事再去做下一件事. 异步事件: 在一个线程里,做一个事的同事,可以另起一个新的线程执行另一件事,这样两件事可以同时执行. 用一个例子来解释同步事件和异步事件的使用场景,有时候一段完整的代码逻辑,可能分为几部分,拿最常见的注册来说,假设完整流程是,1.点击注册->2.检验信息并存库->3.发送邮件通知->4.返回给用户.代码这么写是正确,但不是最好的,缺点如下: 逻辑复杂,业务耦合,我们把校验数据并存库和发送邮件写到一个

  • Springcloud Bus消息总线原理是实现详解

    Springcloud Bus消息总线原理是实现详解

    目录 springcloud Bus 什么是springcloud Bus 什么是消息总线 Bus实现自动刷新的原理 RabbitMQ的下载配置 Erlang RabbitMQ Bus动态刷新 全局广播通知代码实现 定点通知代码实现 springcloud Bus 什么是springcloud Bus   上一章的springcloud Bus是对分布式微服务的远程配置,但是有一个遗留的问题就是,Config客户端对远程配置的刷新需要手动使用post请求来完成,这就使得Config客户端动态刷新

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • mysql MGR 单主多主模式切换知识点详解

    主库执行 CREATE DATABASE test CHARACTER SET utf8 COLLATE utf8_general_ci; use test; create table if not exists h1 (id int(10) PRIMARY KEY AUTO_INCREMENT,name varchar(50) NOT NULL); insert into test.h1 values(1,"wang"),(2,"guo"),(3,"ya

随机推荐