之前做的一个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的简单使用的更多相关文章

  1. vue项目中关于axios的简单使用

    axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...

  2. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  3. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  4. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  5. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  6. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. GoJS 在 vue 项目中的使用

    GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...

  8. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  9. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

随机推荐

  1. Spring MVC + freemarker实现半自动静态化

    这里对freemarker的代码进行了修改,效果:1,请求.do的URL时直接生成对应的.htm文件,并将请求转发到该htm文件2,自由控制某个页面是否需要静态化原理:对org.springframe ...

  2. pandas实现hive的lag和lead函数 以及 first_value和last_value函数

    lag和lead VS shift 该函数的格式如下: 第一个参数为列名, 第二个参数为往上第n行(可选,默认为1), 第三个参数为默认值(当往上第n行为NULL时候,取默认值,如不指定,则为NULL ...

  3. STS工具引入jar报问题?(问题待解决)

    pom.xml文件中先引入ojdbc6,后修改成ojdbc7了,为啥还报下面的错误: Project 'nx-test-mybatis-oracle' is missing required libr ...

  4. ckeditor不能粘贴word的问题如何解决

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  5. 洛谷P1903 [国家集训队]数颜色 / 维护队列 ( 带 修 )

    题意:有两种操作: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2. R P Col 把第P支画笔替换为颜色Col. 对每个1操作 输出答案: 带修莫队 模板题 (加 ...

  6. HTTPie 工具使用入门

    HTTPie 是一个 HTTP 的命令行客户端,目标是让 CLI 和 web 服务之间的交互尽可能的人性化.这个工具提供了简洁的 http 命令,允许通过自然的语法发送任意 HTTP 请求数据,展示色 ...

  7. masm for windows2015 下载安装

    下载地址: https://sm.myapp.com/original/Office/wasm2015.rar

  8. CentOS6.8上Docker配置阿里云镜像加速器

    1.打开网站https://dev.aliyun.com,点击管理中心,登录阿里云账号(没有的可以注册,也可以用淘宝等第三方账号登录). 2.点击镜像加速器,复制加速器地址 3.配置本机Docker运 ...

  9. 经典算法:n个人围成一圈,报m的离开,最后剩下谁?

    public int remainPersonNumber(int n, int m) { //输入不合法 if(n < 1 || m < 1) return -1; //初始化,存入Li ...

  10. spring cloud gateway:Unable to find GatewayFilterFactory with name Hystrix

    在springcloud gateway中引用Hystrix filter 编译启动时提示 Unable to find GatewayFilterFactory with name Hystrix ...