之前做的一个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. Node.js Websocket 区分不同的用户

    实现ws://serverIP:port/:param1/:param2 .通过param1,param2来管理不同的ws回话,以便实现群发和指定用户的消息推送 npm install ws --sa ...

  2. 谷歌浏览器(Google Chrome)开发调试详细介绍

    很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html ...

  3. UPS电源运用在数据中心,有什么优势?

    UPS电源是每个数据中心为了保证服务器与计算设备不被电力线干扰与电能质量问题所影响的设备. 1.电源选择 运用在线式或是后备式UPS电源,均需依照微机设备的需求与经济条件所决定.若是经济条件相对较好, ...

  4. chrome插件编写中需要了解的几个概念和一些方法

    1.插件文件结构 1.1.manifest.json 每一个扩展.可安装的WebApp.皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息. 一个最基本的配置例子: { &q ...

  5. Windows服务操作

    资料 https://docs.microsoft.com/zh-cn/dotnet/api/system.serviceprocess.servicecontroller?redirectedfro ...

  6. strconv

    导入strconv包 Append Format Parse 字符串转其他类型 parse返回两个值,一个转换值,一个err,没有错误时,err返回的是nil,有错误,err接受错误信息. 整型转字符 ...

  7. 收藏加备用。ext.xfs文件系统 文件恢复

    注意 当确认误删除文件后立刻使用各种方式阻止新数据在写入该分区了. 设置只读或umount都可以 ext2 3 4 文件系统 可以用 extundelete 这个工具来恢复. github地址: ht ...

  8. JAVA基础知识|Socket

    一.什么是Socket? Socket本身并不是协议,是一套完成TCP.UDP协议的调用接口(API),通过socket我们才能使用TCP/IP协议(JAVA基础知识|TCP/IP协议).Socket ...

  9. flask 中扩展 flask-login

  10. 访问项目时报错org.apache.jasper.JasperException: java.lang.NullPointerException

    错误信息:org.apache.jasper.JasperException: java.lang.NullPointerException 原因:项目依赖的jar包和tomcat容器的依赖jar包有 ...