• ./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. Ubuntu系统anaconda报错version `GLIBCXX_3.4.30' not found

    参考文章: https://blog.csdn.net/zhu_charles/article/details/75914060 =================================== ...

  2. 为什么大部分的 PHP 程序员转不了 Go 语言?

    大家好,我是码农先森. 树挪死,人挪活,这个需求我做不了,换个人吧.大家都有过这种经历吧,放在编程语言身上就是 PHP 不行了,赶紧转 Go 语言吧.那转 Go 语言就真的行了?那可不见得,我个人认为 ...

  3. @RequestBody中传递json里的对象,对象包含list属性,对应body里的格式

    以下就是对应格式,直接复制进接口文档相关工具即可{ "userId": "88", "openCostCenterDTO": [ { &qu ...

  4. 23. 基于Cortex-A9 uboot代码启动分析

    本篇文章是彭老师第一次在B站直播间,边直播边记录笔记,视频已经上传到B站. 现在完善整理成该篇文章,有想学习uboot启动的代码详细流程的老铁可以进入我B站空间配合视频一起学习. [视频地址] B站用 ...

  5. 基于docker搭建单机测试ELK

    说明:本次使用的windows系统,利用vm进行安装虚拟机,安装的只是单测试单机版elk. 一.下载vm 自行官网下载 二.安装centos7系统 自己有现成的镜像跳过,没有自行查找资料完成 三.进行 ...

  6. .NET 开源实时监控系统 - WatchDog

    前言 在平时的开发中随着我们系统应用不断地迭代变的复杂,对应用的实时监控变得越来越重要.实时监控不仅可以帮助我们快速定位问题,还能在出现问题时及时采取措施,减少业务中断的时间. 本文将介绍一个名为Wa ...

  7. Apple Silicon 芯片 Mac 在 x86_64 模式下启动 Kettle

    苹果于 2020 年推出了自家设计的基于 ARM 架构的 M1 芯片,在日常生活的大部分使用过程中,M1 的体验很好.然而,依然存在一小部分软件无法兼容 ARM 架构,需要我们模拟 x86 的架构来运 ...

  8. 关于人工智能的思考,写在chatGPT爆火之时

    今天是2023年3月22日,今天思维比较活跃,故作文一篇,以记录当下所想. 先是回家询问了未婚妻的想法,然后记录自己的想法. 未婚妻的想法: 1.在AI领域已经滞后于世界了.因为在墙头上看到过一个加拿 ...

  9. 关于arcmap使用json文件转要素类

    手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...

  10. SpringMVC的视图

    目录 ThymeleafView 转发视图 重定向视图 视图控制器view-controller SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户Spr ...