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

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

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

3.传递数据:

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

4.接收数据:

 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. js 输入整数

    1.我用 /^\+?[1-9][0-9]*$/ 貌似不对(小数也可以输入) 2.输入整数  n = /^[1-9]\d*$/; . -]\d*$/; //判断字符串是否为数字 if (!value) ...

  2. ivew-admin 点击预览图片

    1. ivew-admin table { title: '产品图片', key: 'avatar1', align: 'center', render: (h, params) => { re ...

  3. 静态部署TOMCAT

    常见部署方式:静态部署和容器化部署 一.下载tomcat安装包 下载地址:https://tomcat.apache.org/download-90.cgi 图上是显示最新版本,而我下载的是9.0.8 ...

  4. ubuntu Oracle SQL Developer 安装

    一. 官网下载oracle 安装包 二.下载完毕后,检查你的Ubuntu是否安装了tar和alien sudo apt-get install tar sudo apt-get install ali ...

  5. emoji处理方法

    在做微信公众号开发时碰到了获取微信基本信息的需求,但是在像数据库保存用户昵称的时候出错了, 出错原因是微信用户的昵称中包含emoji等特殊符号,表情图片, mysql数据库使用的是utf8,最大存储3 ...

  6. ICU lirary DownLoad

    { //https://github.com/unicode-org/icu }

  7. Android中通过进程注入技术修改广播接收器的优先级

    前言 这个周末又没有吊事,在家研究了如何通过进程的注入技术修改广播接收器的优先级,关于这个应用场景是很多的,而且也很重要,所以就很急的去fixed了. Android中的四大组件中有一个广播:Broa ...

  8. Database基础(六):实现MySQL读写分离、MySQL性能调优

    一.实现MySQL读写分离 目标: 本案例要求配置2台MySQL服务器+1台代理服务器,实现MySQL代理的读写分离: 用户只需要访问MySQL代理服务器,而实际的SQL查询.写入操作交给后台的2台M ...

  9. [jzoj5840]Miner 题解(欧拉路)

    首先考虑第一问.每个联通块的情况是相对独立的,所以可以分别求每个联通块的答案.无向图中存在欧拉路的条件是奇点数为0或2,那么合法方案肯定是tp到一个奇点,通过一条欧拉路到另一个奇点,再tp到另一个奇点 ...

  10. python selenium自动化测试报告

    先记录一下,后续继续更新. 首先:HTMLTestRunner的下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html 选中后单击右键,在弹出 ...