• ./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. gym.wrappers.Monitor报错,无法使用

    使用gym中的录制功能,报错,具体: >>> import gym >>> gym.wrappers.MonitorTraceback (most recent c ...

  2. Linux中scanf类型匹配错误,特指scanf("%d", &c ) ,导致死循环的解决方法 —— fflush(stdin)和getchar()的使用

    如题,朋友领导的孩子大学作业是个C语言编写的管理信息系统发来要我给改改,原代码的配置环境是Windows的C环境,由于10多年没有搞过Windows下的C语言了于是换上了Ubuntu18.04的系统上 ...

  3. 如何在vscode中支持python的annotation(注解,type checking)——通过设置pylance参数实现python注解的type checking

    pylance是vscode的python官方插件的捆绑体,如何在vscode中安装python插件这里不介绍了.pylance的默认设置是不支持python的annotation的,需要我们手动设置 ...

  4. .NET 免费开源工业物联网网关

    前言 IoTClient 是一个针对物联网 (IoT) 领域的开源客户端库,它主要用于实现与各种工业设备之间的通信.这个库是用 C# 编写的,并且基于 .NET Standard 2.0,这意味着可以 ...

  5. 利用Linux系统提供的和调度器相关的接口让进程或线程对某个处理器进行绑定

    目录 设置进程与CPU的亲和性 设置线程与CPU的亲和性 设置进程与CPU的亲和性 taskset命令允许你查看或设置运行中的进程的CPU亲和性(即该进程可以在哪些CPU上运行). 要将一个已经运行的 ...

  6. 使用 defineNuxtRouteMiddleware 创建路由中间件

    title: 使用 defineNuxtRouteMiddleware 创建路由中间件 date: 2024/8/10 updated: 2024/8/10 author: cmdragon exce ...

  7. 17-canvas绘制扇形

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  8. 使用 iRingo 解锁本该属于你的苹果服务

    为什么别人的 Spotlight 可以通过航班号查询航班信息,而我的不行?为什么别人的 Spotlight 可以直接看英超联赛的比分信息?为什么我的 Apple News 打不开?这其实是因为这些功能 ...

  9. 严蔚敏 数据结构 配套教材 PDF

    目录 严蔚敏 数据结构 配套教材 PDF 下载地址: 严蔚敏 数据结构 配套教材 PDF 配套教材包括: 严蔚敏<数据结构题集>(C语言版).pdf 严蔚敏<数据结构>(C语言 ...

  10. MYSQL数据库备份还原,并还原到最新状态(mysqldump)

    启用二进制日志文件 vim /etc/my.cnf 配置文件位置及文件名根据实际情况确定<br>sql_log_bin=on|off:是否记录二进制日志,默认为on 在需要的时候设置为of ...