vue之bus总线的简单使用解读

目录
  • vue bus总线的使用
    • 场景描述
    • 如下所示
  • bus总线的原理解析
    • 1.怎么理解bus总线
    • 2.bus组件存在的条件和注册
    • 3.使用
  • 总结

vue bus总线的使用

场景描述

A组件中包括B，C组件，而B组件中包括D组件，这时如果D组件想要在A组件中触发C组件的方法怎么办呢？

当然方案是有的，用状态管理vuex可以，用$emit传递也可以，但是我想试着用的是bus总线的方式；

如下所示

D组件中触发bus的emit ，然后在A组件中用bus总线的on来触发方法；

D组件中

dataLoad(){
   console.log('加载完触发事件');
   this.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('事件名称', 参数) // 第二个可以为参数
},

A组件中

 mounted() {
    // 监听item中数据加载完
    this.$bus.$on('itemDataLoad', () => {
      console.log('数据加载完');
    })
    // this.$bus.$on('事件名称', 回调函数(参数))
  },

当然在A组件中通过 this.$refs 的方式就可以触发C组件中的事件等

还有一步骤是 $bus 默认是不存在的啊，打印试试this.$bus为undefined啊；

别急，在main.js中加上$bus；

// bus总线 vue实例
Vue.prototype.$bus = new Vue()

当然可以在生命周期中移除bus总线；

this.$bus.$off();

记录封装的防抖函数

// 防抖函数
  debounce: function (fun, delay) {
    let timer = null
    // 接收调用函数时传入的参数的值 ...args 可多个
    return function (...args) {
      if (tiemr) return
      timer = setTimeout(() => {
        fun.apply(this, args)
      }, delay);
    }
  }

const refresh = debounce(xxx, 500)

refresh('参数1', '参数2', '参数3')

bus总线的原理解析

关于官方介绍 从 Vue 1.x 迁移 — Vue.js

在官方文档中对bus总线的介绍是使用，但是明确指出了复杂情况推荐使用vuex实现非父子组件直接的传值，bus总线应用在简单的项目

1.怎么理解bus总线

bus总线就是一个中间组件,触发事件，触发中间组件，监听中间组件的变化

2.bus组件存在的条件和注册

  • 1.所有组件都可以访问
  • 2.可以使用$emit,$on,$off

在项目过程中要满足这两点需求

1.所有组件都可访问

在vue的项目中，要所有组件都可以访问，那么一定在vue进行实例化之前就准备好,就是下图红色部分

2.可以使用$emit,$on,$off

有$emit，$on，$off的一定是vue的实例对象vc,或者vueComponent的实例对象vm

挂载到哪都可以访问？必然是原型上

vue.prototype.$bus = vue的实例对象/vueComponent的实例对象

第一种：

Vue.prototype.$bus = vueComponent的实例对象(所有的vueComponent的实例对象都是（Vue.extentd构造的)

第二种：

在生命周期创建之前 Vue.prototype.$bus = vue的实例对象

第三种：

利用插件进行挂载

安装 - npm install vue-bus

注册使用：

import VueBus from 'vue-bus';

Vue.use(VueBus)

3.使用

触发事件

this.$bus.$emit('事件名', 值)

监听事件

create() {
  this.$bus.$on('事件名', (值) = > {
  })
}

销毁事件

this.$bus.$off('事件名')

在理解bus总线的前提，是需要理解，为什么写在vue的原型上就可以访问？可以自行思考一下，涉及了一些vue的原理

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3+ts使用bus事件总线的示例代码

    1.在vue2中我是这样使用的 //创建一个vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; //在main.js中引入 import vueBus from '@/utils/vueBus'; Vue.use(vueBus); //可根据this.$bus._events['事件名'] 来查看是否

  • vue之bus总线简单使用讲解

    vue之bus总线的简单使用 场景描述: A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下: D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad(){ console.log('加载完触发事件'); this.$bus.$emit('itemDataLoad') // this.$bu

  • Vue中事件总线(eventBus)的深入详解及使用

    Vue中事件总线(eventBus)的深入详解及使用

    目录 1.简介 2.使用 安装及引入 在组件中使用 补充:移除监听事件 总结 1. 简介 Vue 组件中常见的有:父子组件通信.兄弟组件通信.而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件. 今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢? 如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信. eventBus

  • 在Uni中使用Vue的EventBus总线机制操作

    首先我们要使用的EventBus事件总线,能够做到兄弟组件,或者不是父子关系的页面达到数据相互传递的效果 一种做法是在main.js中创建事件总线 创建完$EventBus后,就可以直接在页面中使用事件总线的方法来发送和接收事件了 第二种做法:封装事件总线 使用的时候直接引入就可以了 补充知识:vue里使用EventBus解决兄弟组件间的传递信息 ①初始化 import Vue from 'vue' export const EventBus = new Vue(); ②在需要的调用其他组件的页

  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据.检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!! 我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据.因此,我通过两个页面来了解路由跳转时两个页面的生命周期,下面给出其中一个页面的部分代码: //页面1 beforeCreate () {

  • vue中的总线机制(EventBus)解析

    目录 一.EventBus的简介 二.使用方法 第一步:2种方式初始化 第二步:发送事件 第三步:接受事件 第四步:移除事件 三.全局EventBus 1.注册,在main.js中 2.在组件中使用 四.EventBus的优缺点 一.EventBus的简介 EventBus 又称时间总线 ,理解上来讲 EventBus 机制是通知的概念,EventBus作为所有组件共享的事件中心,既可以发送事件也可以接受事件,所有组件都可以平行的接到到相对应的数据. 二.使用方法 第一步:2种方式初始化 在项目

  • Vue全局事件总线$bus安装与应用小结

    Vue全局事件总线$bus安装与应用小结

    目录 1.什么是全局事件总线 2.安装 3.使用 4.销毁 完整版示例: 1.什么是全局事件总线 一种组件间通信的方式,适用于任意组件间通信. 2.安装 在main.js里安装全局事件总线: new Vue({ ...... beforeCreate(){ //安装全局事件总线,$bus就是当前应用的vm Vue.prototype.$bus=this } ...... }) 3.使用 使用全局事件总线: 1.接收数据:A组件想接收数据,则要在A组件中给$bus绑定自定义事件,事件的回调留在A组

  • Vue eventBus事件总线封装后再用的方式

    目录 前言 空vue实例构建的事件总线 简单的方式 复杂又简单的方式 总结 前言 现在的项目中是不是在使用 eventbus 的时候,还有很多人都是直接创建一个vue 实例直接使用的,哪里需要哪里引入,而没有简单的处理下.接下来就先说下这种方式. 空vue实例构建的事件总线 在改造一个项目的时候就发现,里面的 bus.js 文件中就是这么处理的.两行代码搞定. import Vue from "vue"; export default new Vue() 使用的时候,就没那么简单了,有

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

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

  • vue之bus总线的简单使用解读

    目录 vue bus总线的使用 场景描述 如下所示 bus总线的原理解析 1.怎么理解bus总线 2.bus组件存在的条件和注册 3.使用 总结 vue bus总线的使用 场景描述 A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢? 当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式: 如下所示 D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法: D组件中 dataLoad

  • 浅谈vue中$bus的使用和涉及到的问题

    Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus.使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀). 1:创建$bus文件 创建一个文件内容如下: import Vue from 'vue' export default new Vue(); 2:引入$bus main.js: import Bus from './views/bus/bus'; Vue.prototype.$bus = Bus;

  • Vue中bus的使用详解

    vue总线机制(bus) vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 组件通信bus的使用 在utils文件下下创建bus.js // utils -

  • Vue全局事件总线你了解吗

    Vue全局事件总线你了解吗

    全局事件总线,是组件间的一种通信方式,适用于任何组件间通信. 看下面具体的例子. 父组件:App <template> <div class="app"> <Company/> <Employee/> </div> </template> <script> import Company from "./components/Company.vue"; import Employee

随机推荐