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 当我们采 ...
随机推荐
- Ellipsis对象
Ellipsis对象. 写作 : ‘…’ 中文解释:省略 该对象bool测试是为真 用途: 1.用来省略代码,作用类似于pass的一种替代方案,这是python的’TBD’(未确定内容). def f ...
- 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题
在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...
- python通用分页功能
实现: class Page: def __init__(self,current_page,data_count,per_page_count=10,pager_num=10): self.curr ...
- Myeclipse10打开jsp页面卡死问题
在Myeclipse的选项中.General->Editor->File Associations.在上边找到*.jsp.在下边设置Myeclipse JSP Editer为默认编辑器.以 ...
- Oracle 物理结构(一) 文件-Inventory
一.Inventory的定义与作用 oraInventory存放的是Oracle软件安装的目录信息,Oralce的安装升级都需要用到这个目录,来看看Oracle文档中对这个目录的一点说明:All Or ...
- 51nod 1020
求 $n$ 个数的排列中逆序数为 $k$ 的排列数$f[n][k]$ 表示 $n$ 个数的排列中逆序数为 $k$ 的排列数$f[n][k] = \sum_{i = 0}^{n - 1} f[n - 1 ...
- [ZJOI2009]假期的宿舍 二分图匹配匈牙利
[ZJOI2009]假期的宿舍 二分图匹配匈牙利 一个人对应一张床,每个人对床可能不止一种选择,可以猜出是二分图匹配. 床只能由本校的学生提供,而需要床的有住校并且本校和外校两种人.最后统计二分图匹配 ...
- mac 安装oh-my-zsh的问题
安装完,如果想切换回mac原来的bash终端,可以: chsh -s /bin/bash 反之,切换回zsh: chsh -s /bin/zsh
- codeforces814E
https://lunch.blog.luogu.org/cf814e-an-unavoidable-detour-for-homedp-ji-shuo-post https://blog.csdn. ...
- 二十三、Linux任务计划及周期性任务执行:at、crontab命令
一.概述 未来的某时间点执行一次某任务:at, batch周期性运行某任务:crontab 这两个任务的执行结果:会通过邮件发送给用户 (本地终端用户之间的邮件通知) centos 5,6,7默认开启 ...