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.$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')

到此这篇关于vue之bus总线简单使用讲解的文章就介绍到这了,更多相关vue之bus总线简单使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

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

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

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

  • 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之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全局事件总线和订阅与发布使用案例分析讲解

    Vue全局事件总线和订阅与发布使用案例分析讲解

    目录 一.全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二.订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 一.全局事件总线 作用 一种组件间通信的方式 适用于任意组件间通信. 安装 安装全局事件总线:在入口文件main.js中,给VM添加$bus,任意组件都可以在原型中调用. new Vue({ render: h => h(App), beforeCreate(){ Vue.prototype.$bus = t

  • 基于vue.js路由参数的实例讲解——简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

  • 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组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    目录 前言 一.父级传数据给子级 1.传输固定的具体数据 2.动态语法 3.子组件调用父组件 二.子级传数据给父级 1.使用自定义事件 2.$refs的使用 3.同级别组价以及任意组件之间的数据传递 前言 在前面,我们已经了解了vue的组件以及vue组件之间的层级关系,这个在博主的往期博客,感兴趣的可以往前挪,地址是: 1.vue组件 2.vue组件的层级关系 本文主要编写记录的是,组件之间的通信的模式以及通信的方式,我们的组件之间只能调用自己的属性和自己的方法,不能调用其他组件的属性以及方法,

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

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

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

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

  • vue 多入口文件搭建 vue多页面搭建的实例讲解

    红色为更改后的不同之处 vue 多入口文件搭建 在webpack.base.conf 中修改 var path = require('path') var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname,'../') var glob = require('glob'); var entries = getEntry('./src/modul

随机推荐