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 当我们采 ...
随机推荐
- BZOJ 2095 [Poi2010]Bridges (二分+最大流判断混合图的欧拉回路)
题面 nnn个点,mmm条双向边(正向与反向权值不同),求经过最大边权最小的欧拉回路的权值 分析 见 commonc大佬博客 精髓就是通过最大流调整无向边的方向使得所有点的入度等于出度 CODE #i ...
- Codeforces Round #584 A. Paint the Numbers
链接: https://codeforces.com/contest/1209/problem/A 题意: You are given a sequence of integers a1,a2,-,a ...
- 3、Spring Boot 2.x 核心技术
1.3 Spring Boot 核心技术 1.3.1 起步依赖 为项目的依赖管理提供帮助.起步依赖其实就是特殊的Maven,利用了传递依赖解析,把常用库聚合在一起,组成几个为特定功能而定制的依赖. 1 ...
- pyinstaller打包好的.exe程序在别的电脑上运行出错
打开.exe提示: Failed to execute script... 查看命令行错误提示为: 总的来说呢,就是有的版本pyqt5库对系统变量的加载存在bug,具体原因只有官方才能解释了,咱也没法 ...
- mousemove([[data],fn])
mousemove([[data],fn]) 概述 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件.大理石构件来图加工 mousemove事件处理函数会被传递一个变量——事件对象, ...
- 002_linux驱动之_register_chrdev注册字符设备
(一)解析:register_chrdev函数和unregister_chrdev函数 (二)register_chrdev函数原型 int register_chrdev(unsigned int ...
- sql 临时表的使用详解
Sqlserver数据库中的临时表详解 临时表在Sqlserver数据库中,是非常重要的,下面就详细介绍SQL数据库中临时表的特点及其使用,仅供参考. 临时表与永久表相似,但临时表存储在tem ...
- Win内核原理与实现学习笔记2-现代操作系统的基本结构
1.操作系统本属于软件的范畴,但它需要紧密的跟硬件打交道,它为上层应用软件或应用系统提供了一层抽象,专门负责硬件资源的管理和分配.(应用程序不需要跟硬件打交道,它们利用操作系统提供的功能来实现各种任务 ...
- uiautomator2 wifi连接手机
[实施方法] 手机和电脑同时连接到同一个wifi上 1.开启远程adb #开启远端adb,这一步需要手机通过USB连接到电脑 adb tcpip 5555 #结果如下:restarting in TC ...
- Ubuntu18.04上安装N卡驱动、CUDA、CUDNN三连
环境:Ubuntu18.04 显卡驱动真的挺方便的,CUDA和CUDNN还是踩了一些坑2333 1.安装显卡驱动 安装ubuntu更新或sudo apt-get update & sudo a ...