1. 1.vue-cli搭建好项目之后,使用npm安装vue-bus
  1. npm install vue-bus

2.在入口文件main.js中全局注册

  1. import Vue from 'vue';
  2. import VueBus from 'vue-bus';
  3. 3 Vue.use(VueBus);

3.传递数据:

  1. this.$bus.emit("eventName",data)

4.接收数据:

  1. this.$bus.on("eventName",data)

5.注意事项

this的作用域要指向当前的vm实例,on监听事件一般放在组件生命周期函数中的created或者mounted中,注销bus需要在beforeDestroy中;

关于bus事件触发多次的问题,一方面可能因为vue组件被复用,导致一个bus事件被重复注册,破坏了“同事件名”bus,发送与接收唯一对应的关系;

另一方面是页面路由的时候,原有页面中的bus事件并没有被注销,依然隐藏在程序中。

vue-bus全局事件中心简单Demo的更多相关文章

  1. vue bus 中央事件总线

    1.全局定义bus 新建src/eventBus.js 文件 import Vue from 'vue' export default new Vue() //  全局引入mai.jsvue中央事件总 ...

  2. Vue一个案例引发的动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...

  3. Vue学习之--------全局事件总线(2022/8/22)

    文章目录 1.全局事件总线基础知识(GlobalEventBus) 2.图解过程 3.代码实例 3.1 main.js 3.1 App.vue 3.2 School.vue 3.3 Student.v ...

  4. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  5. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  6. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  7. Vue的this.$root.Bus.$on事件被多次触发、多次监听的问题

    前端vue项目中,各个组件(非父子关系也可)之间可以通过Bus进行事件通信. main.js中: import Vue from 'vue' const Bus = new Vue(); const ...

  8. 【Azure 事件中心】在Service Bus Explorer工具种查看到EventHub数据在分区中的各种属性问题

    问题描述 通过Service Bus Explorer工具,查看到Event Hub的属性值,从而产生的问题及讨论: Size in Bytes:   这个是表示当前分区可以存储的最大字节数吗? La ...

  9. vue bus 的使用

    简单的状态管理,可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定义:main.js window.even ...

随机推荐

  1. Git中.gitignore文件不起作用

    Git中.gitignore文件不起作用的解决以及Git中的忽略规则介绍   在Studio里使用Git管理代码的过程中,可以修改.gitignore文件中的标示的方法来忽略开发者想忽略掉的文件或目录 ...

  2. PHP+Redis 有序集合实现 24 小时排行榜实时更新

    基本介绍 Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个 double 类型的分数.redis 正是通过分数来为集合中的成员进行从 ...

  3. excel acm 高校排名(hdoj)

    其实写一个程序是最方便的... 不用每次进行很多次操作. 当然,能获得后台的数据更好…… e.g. 链接: https://pan.baidu.com/s/1a7s85oaKGam1-0mJ2v39u ...

  4. BZOJ 3926: [Zjoi2015]诸神眷顾的幻想乡(后缀自动机)

    传送门 解题思路 因为叶节点不超过\(20\)个,所以可以枚举这些叶节点,并把这些节点当做根扫整棵树.可以证明所有的子串一定可以被便利到,然后可以对这些串建广义后缀自动机.\(dfs\)的时候要记录一 ...

  5. gokit 统计分析 M2M接入服务 OTA固件升级 硬件社交化

    统计分析 M2M接入服务  OTA固件升级 硬件社交化 统计分析 为智能硬件定制的统计分析服务.只需添加入一行代码的集成工作,多维度的设备使用和用户行为数据就能自动统计出来. 演示 特色一:设备上线情 ...

  6. 大数据学习笔记之Linux基础(一):Linux初窥

    文章目录 一.Linux入门概述 1.1 概述 1.2 下载地址 1.3 Linux特点 1.4 Linux和Windows区别 二.VM安装相关 2.1 安装VMWare虚拟机 2.2 安装Cent ...

  7. java 重新学习 (一)

    一 垃圾回收特点 1.垃圾回收的工作目标是回收物对象的内存空间,这些内存空间都是jvm堆内存里的空间,垃圾回收器值回收内存资源,对他的物理资源:数据库连接,磁盘I/O等资源则无能为力 2.更快进行垃圾 ...

  8. Django 模型中的CRUD

    一.通过 ORM 向 DB 中增加数据 1.Entry.objects.create(属性=值,属性=值) Entry:具体要操作的Model类 ex: Author.objects.create(n ...

  9. SpringBoot+Thymeleaf+iView

    SpringBoot+Thymeleaf参考: https://www.cnblogs.com/kibana/p/10236187.html 1.Controller: package cn.mmwe ...

  10. 18-vim-插入命令

    在vi中除了常用的i进入编辑模式外,还提供了以下命令同样可以进入编辑模式: 命令 英文 功能 使用频率 i insert 在当前字符前插入文本 常用 I insert 在行首插入文本 较常用 a ap ...