• ./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. 从baselines库的common/vec_env/vec_normalize.py看reinforcement learning算法中的reward shape方法

    参考前文:https://www.cnblogs.com/devilmaycry812839668/p/15889282.html 2.  REINFORCE算法实际代码中为什么会对一个episode ...

  2. [简单] 树上的dfs & bfs_洛谷P5908 猫猫和企鹅

    题目链接https://www.luogu.com.cn/problem/P5908 题目大意: \[\begin{align*} & 给定n个点构成一颗树 每条边val=1\\ & ...

  3. Kruskal和Prim模板

    例题:P3366 [模板]最小生成树 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) Kruskal #include <bits/stdc++.h> #define d ...

  4. 热力学平衡、Liftshitz 理论和朗道理论

    科学家们经过广泛的实验发现:熔化往往始于固体表面.熔化时,体系由 "固体-气体接触" 变为 "固体-熔化层接触 + 熔化层-气体接触".如果后者的能量更稳定,则 ...

  5. Minnaert

    Minnaert 假设气泡关闭时发生周期性膨胀和收缩,周围水也跟着振动,就嗷地一声叫了出来!设有个半径为 \(r\) 的泡形成后开始简谐振动,半径有 \[r=r_0+a\sin\frac{2\pi t ...

  6. DDD建模后写代码的正确姿势(Java、dotnet双平台)

    本文书接上回<一种很变态但有效的DDD建模沟通方式>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术交流: ...

  7. [学习笔记]在不同项目中切换Node.js版本

    @ 目录 使用 Node Version Manager (NVM) 安装 NVM 使用 NVM 安装和切换 Node.js 版本 为项目指定 Node.js 版本 使用环境变量指定 Node.js ...

  8. LaTeX 几种中文字体的比较

    根据自己的喜好给常见的几个中文字体的打分: 字体选项 字体名 得分 adobe Adobe 宋体 Std 5 fandol FandolSong 0 founder 方正书宋_GBK 10 hanyi ...

  9. Android Studio 项目已经sync完成,但是在布局中显示:Design editor is unavaliable until after a sunncessful project sync

    原因:在drawable文件夹中新增了一个png图标 解决:同步在drawable-v24文件中复制一份即可

  10. vue 报错 Component template should contain exactly one root element. If you are using v-if on multiple elements

    vue 报错 Component template should contain exactly one root element. If you are using v-if on multiple ...