• ./util/Bus.js

    import Bus from 'vue';
    let install = function (Vue) {
    // 设置eventBus
    Vue.prototype.bus = new Bus();
    } export default { install };
  • 安装: npm install vue-bus
  • 在main.js 中引入vuebus:
  • 1
    2
    3
    4
    import Vue from 'vue';
    import VueBus from 'vue-bus';
     
    Vue.use(VueBus);

    在组件中使用

    触发事件:

    this.$bus.emit("事件名",值)
    应对事件:
    mounted:function(){
    this.$bus.on("事件名",function(值){
    });
    },
    destroyed:function(){
    this.$bus.off("事件名");
    }
     
     
    this.$bus.emit  ==>    触发
    this.$bus.on    ==>     接収
    this.$bus.off   ==>     清除
     
    注意:接收后要清除事件,不然会造成不必要的后果!!!

vue中事件总线bus的用法的更多相关文章

  1. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  2. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  3. vue笔记 - 组件间通信 之 中央事件总线bus

    中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...

  4. Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用

    事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...

  5. vue中央事件总线eventBus的简单理解和使用

    公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...

  6. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue中mixin的理解与用法

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...

  8. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  9. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

随机推荐

  1. 【转载】 使用Python的ctypes查看内存

    =================================================================== 原文地址: https://zhuanlan.zhihu.com ...

  2. 【转载】 机器人真·涨姿势了:比肩人类抓取能力,上海交大、非夕科技联合提出全新方法AnyGrasp

    原文地址: https://developer.aliyun.com/article/822654 ================================================= ...

  3. C#开发的全屏图片切换效果应用 - 开源研究系列文章 - 个人小作品

    这天无聊,想到上次开发的图片显示软件< PhotoNet看图软件 >,然后想到开发一个全屏图片切换效果的应用,类似于屏幕保护程序,于是就写了此博文.这个应用比较简单,主要是全屏切换换图片效 ...

  4. Apache DolphinScheduler 如何实现自动化打包+单机/集群部署?

    Apache DolphinScheduler 是一款开源的分布式任务调度系统,旨在帮助用户实现复杂任务的自动化调度和管理.DolphinScheduler 支持多种任务类型,可以在单机或集群环境下运 ...

  5. LemurBrowser狐猴浏览器:支持插件扩展、内置免费AI工具的移动端浏览器

    如何选择一款合适的浏览器? 在这个数字化时代,浏览器作为互联网的入口.然而,选择一款合适的浏览器却并不容易. 注释:狐猴浏览器是浏览器新标签页插件Wetab提供的支持在移动端安装插件,内置免费AI工具 ...

  6. yum下载包保存到本地

    1.使用yumdownloadonly下载RPM包及依赖包 #下载yumdownloadonly插件 yum install yum-plugin-downloadonly # yum 下载rpm包到 ...

  7. How-many

    #include <bits/stdc++.h> #include <termio.h> #include <unistd.h> typedef long long ...

  8. 导出 LaTeX 为 SVG

    LaTeX 本身并不直接支持导出 SVG 格式的文档或图片,但可以通过一些工具和插件实现将 LaTeX 文档或图形转换为 SVG 格式. 使用 dvisvgm 我们可以先将 LaTeX 文档编译为 D ...

  9. uniapp中,getApp()返回的实例到底是什么?为什么getApp()返回的实例无法访问vuex的$store

    按uniapp官方手册中说,getApp()函数用于获取当前应用实例.当前应用,也就是说当前应用程序.因为getApp()返回的实例可以用于访问app.vue中的globaldata,因此这个当前应用 ...

  10. docker系列教程:docker图形化工具安装及docker系列教程总结

    通过前面的学习,我们已经掌握了docker-compose容器编排及实战了.高级篇也算快完了.有没有相关,我们前面学习的时候,都是通过命令行来操作docker的,难道docker就没有图形化工具吗?答 ...