vue项目中event bus的简单使用
之前做的一个vue后台管理系统中,需要实现这样一个功能:从列表页点击新建或编辑进入新建、编辑页面,新建、编辑完成后需要关闭当前的新建和编辑tab,而tab的关闭则是由项目中的tag组件控制的,
新建和编辑组件与tag组件并无父子关系,因此无法用父子组件传递数据,所以想到了用event bus来实现。
记录步骤如下:
1,需要先新建一个bus.js文件
2,在接收组件和传递组件中分别引入该文件
import bus from "./bus";
3,在传递组件中定义方法传递数据
bus.$emit('clear', 'newProgram')
第一个参数为方法名,第二个参数为传递数据
4,在接收组件中接收数据
created() {
bus.$on('clear', msg => {
this.path = msg
this.closeProgram()
})
this.setTags(this.$route);
},
vue项目中event bus的简单使用的更多相关文章
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- 在vue项目中 如何定义全局变量 全局函数
如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- GoJS 在 vue 项目中的使用
GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
随机推荐
- 在stm32开发可以调用c标准库的排序和查找 qsort bsearch
在嵌入式开发中,可以使用c标准库自带的库函数,而不用自己去早轮子,qsort 和bsearch就是其中的两个比较好用的 二分法查找,前提是已经排序好的数据.下面的代码, 如果数据为排序,则要进行排序后 ...
- 「NOI2015」荷马史诗 (k叉huffman树/k叉合并果子)
是个多叉huffman树,思想类比合并果子. 具体见 CrazyDave 的博客 CODE #include <bits/stdc++.h> using namespace std; ty ...
- 03_每周 5 使用 tar 命令备份/var/log 下的所有日志文件
]# vim /root/logbak.shtar -czf log-`date +%Y%m%d`.tar.gz /var/log ]# crontab -e -u root00 03 * * 5 / ...
- 线程的分离状态 detached joinable
转自 http://blog.chinaunix.net/uid-26983585-id-3315953.html 其实在写上一篇日志的时候,由于我把创建线程的返回值的判断条件写错了,程序每次运行的 ...
- sqlserver 存储过程的新建与执行
if Exists(select * from sysobjects where NAME = 'insert_custominfo' and type='P') drop procedure ins ...
- 2019巅峰极客CTF-web1(LOL英雄联盟)
今晚有空 以后随缘写博客了 好好沉淀 web1当天做出的队伍很少 其实不难 折腾到最后就差一步 可惜 0x01 读取文件 截图没留了 只留了代码部分. 有个页面 有上传和下载功能 起初 ...
- CISCO实验记录十一:switch端口安全配置
1.启用交换机端口安全 2.限制端口最大访问量为1,超出后关闭端口 1.启用交换机端口安全 #interface gigabitEthernet 0/1 #switchport mode access ...
- 20175313 张黎仙《Java程序设计》第十周学习总结
目录 一.教材学习内容总结 二.教材学习中的问题和解决过程 三.代码调试中的问题和解决过程 四.代码托管 五.心得体会 六.学习进度条 七.参考资料 一.教材学习内容总结 第十二章内容 主要内容 杂项 ...
- Spring事务知识点
事务的传播属性 PROPAGATION_REQUIRED 如果当前没有事务,就新建一个事务,如果已经存在一个事务中,加入到这个事务中.// 最常用,@Transactional注解默认 PROPAGA ...
- Gokit微服务-服务链路追踪
https://mp.weixin.qq.com/s/gjKOy4SDpsjUXDC3Q1YdFw Gokit微服务-服务链路追踪 原创: 兮一昂吧 兮一昂吧 2月28日