vue中事件总线bus的用法
./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:- 1234
importVue from'vue';importVueBus 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的用法的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue笔记 - 组件间通信 之 中央事件总线bus
中央事件总线 - 就是一个名字可以叫做bus的vue空实例,里边没有任何内容: var bus = new Vue(); 人如其名,她就像一个公交车一样,来回输送人,将a站点的A输送到b站点,再将b站 ...
- Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用
事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...
- vue中央事件总线eventBus的简单理解和使用
公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信.它是实现非父子组件通信的一种解决方案. 用法如下: 第一步:项目中创建一个js文件(我通 ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中mixin的理解与用法
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
- vue中computed的作用以及用法
在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
随机推荐
- Ubuntu系统anaconda报错version `GLIBCXX_3.4.30' not found
参考文章: https://blog.csdn.net/zhu_charles/article/details/75914060 =================================== ...
- 为什么大部分的 PHP 程序员转不了 Go 语言?
大家好,我是码农先森. 树挪死,人挪活,这个需求我做不了,换个人吧.大家都有过这种经历吧,放在编程语言身上就是 PHP 不行了,赶紧转 Go 语言吧.那转 Go 语言就真的行了?那可不见得,我个人认为 ...
- @RequestBody中传递json里的对象,对象包含list属性,对应body里的格式
以下就是对应格式,直接复制进接口文档相关工具即可{ "userId": "88", "openCostCenterDTO": [ { &qu ...
- 23. 基于Cortex-A9 uboot代码启动分析
本篇文章是彭老师第一次在B站直播间,边直播边记录笔记,视频已经上传到B站. 现在完善整理成该篇文章,有想学习uboot启动的代码详细流程的老铁可以进入我B站空间配合视频一起学习. [视频地址] B站用 ...
- 基于docker搭建单机测试ELK
说明:本次使用的windows系统,利用vm进行安装虚拟机,安装的只是单测试单机版elk. 一.下载vm 自行官网下载 二.安装centos7系统 自己有现成的镜像跳过,没有自行查找资料完成 三.进行 ...
- .NET 开源实时监控系统 - WatchDog
前言 在平时的开发中随着我们系统应用不断地迭代变的复杂,对应用的实时监控变得越来越重要.实时监控不仅可以帮助我们快速定位问题,还能在出现问题时及时采取措施,减少业务中断的时间. 本文将介绍一个名为Wa ...
- Apple Silicon 芯片 Mac 在 x86_64 模式下启动 Kettle
苹果于 2020 年推出了自家设计的基于 ARM 架构的 M1 芯片,在日常生活的大部分使用过程中,M1 的体验很好.然而,依然存在一小部分软件无法兼容 ARM 架构,需要我们模拟 x86 的架构来运 ...
- 关于人工智能的思考,写在chatGPT爆火之时
今天是2023年3月22日,今天思维比较活跃,故作文一篇,以记录当下所想. 先是回家询问了未婚妻的想法,然后记录自己的想法. 未婚妻的想法: 1.在AI领域已经滞后于世界了.因为在墙头上看到过一个加拿 ...
- 关于arcmap使用json文件转要素类
手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...
- SpringMVC的视图
目录 ThymeleafView 转发视图 重定向视图 视图控制器view-controller SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户Spr ...