vue eventBus使用
类似于iframe之间的possMessage方式传参
1、eventBus.js文件
//用于兄弟组件通信
import Vue from 'vue';
export default new Vue();
2、页面开启监控
import Bus from '../../../eventBus.js' mounted(){
//被调用方法,先保存数据,在回调方法
var _this = this;
Bus.$off('ComputeSubStep');
Bus.$on('ComputeSubStep', function (callback) {
_this.DefaultDataCommon(function () {
if (typeof callback == "function") {
callback();
}
});
});
},
3、其他页面调用
methods: {
//页面转被跳转,调用兄弟组件方法
ComputeStep(expoolid, exid, index){
var _this = this;
Bus.$emit('ComputeSubStep', function () {
_this.$router.push({path: `/ComputeStep/${expoolid}/${exid}/${index}`})
});
},
}
vue eventBus使用的更多相关文章
- vue eventBus 跳坑的办法
前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...
- 13.vue组件
vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8& ...
- vue组件知识总结
vue组件化开发 将一个页面分割成若干个组件,一个页面js+css+html,将自己类容分割出来,方便开发,更好了维护我们的代码,每个组件封装自己的js+html+css,样式命名冲突 组件分类 页面 ...
- vue项目的一些最佳实践提炼和经验总结
项目组织结构 ajax数据请求的封装和api接口的模块化管理 第三方库按需加载 利用less的深度选择器优雅覆盖当前页面UI库组件的样式 webpack实时打包进度 vue组件中选项的顺序 路由的懒加 ...
- 事件总线(EventBus)
Vue.prototype.$EventBus = new Vue() 不建议用,尽量用vuex,eventbus过于消耗浏览器资源 傻瓜版状态管理 一般的状态传递是在同时显示的情况下,倘若是在不同时 ...
- React / Vue 跨端渲染原理与实现探讨
跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pd ...
- vue + typescript,定义全局变量或者方法
众所周知,在 vue中,如果想定义一个全局变量的方法很简单,直接在 vue的原型上挂载属性或者方法即可. 但是,加上了typescript之后, Vue.prototype.$xxx = xxx 这 ...
- js 整理 前端知识点 前端面试题 (2020)(vue)
数据类型 字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型:对象(Object).数组(Array). ...
- JavaScript中的原型、原型链、原型模式
今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...
随机推荐
- OpenStack-Neutron-Fwaas-代码【二】
上一节从代码层面来讲解了fwaas的流程,这里通过具体查看iptables规则来说下应用规则的流程: 1.首先通过命令获取当前路由中的规则 #ip netns exec qrouter-[router ...
- 将BUG管理工具(禅道)部署到服务器(测试服务器、云服务器)
禅道是一个开源的项目管理软件,用来记录软件项目的开发过程.bug跟踪以及任务分配,它是基于PHP语言开发的. https://www.zentao.net/download/80111.htm ...
- Tableau 学习资料
官方文档: https://www.tableau.com/zh-cn/support/help 其他教程: tablaue破解版_tableau10 破解_tableau server 破解:htt ...
- 跨域请求携带cookie
function ajaxPostRequestCipherMachine(url, param) { var url = url; var dict = { 'ret' : false, 'er ...
- Linux中检查本地系统上的开放端口列表的方法
在 Linux 中很少有用于此目的的实用程序.然而,我提供了四个最重要的 Linux 命令来检查这一点. 你可以使用以下四个命令来完成这个工作.这些命令是非常出名的并被 Linux 管理员广泛使用.n ...
- [dart学习]第一篇:windows下安装配置dart编译环境,写出helloworld
前言 博主非科班出身,平时多用C语言,最近想了解学习一门第二语言,看上了可用于移动开发的目前还小众一点dart,准备用一段比较长的时间来慢慢学习.理解. 关于dart语言不再详细介绍了,大家可以访问 ...
- C# WMI通过网络连接名称获取IP掩码网关
/// <summary> /// 读取IP,掩码,网关地址 /// </summary> /// <param name="netConnectorName& ...
- python 字典嵌套字典赋值异常
针对dict中 嵌套dict 出现复制异常 lists={} test=['s1','s2','s3'] data = {'value': '',} for i in range(2): lists[ ...
- Transparent PageRoute in Flutter for displaying a (semi-) transparent page
import 'package:flutter/widgets.dart'; class TransparentRoute extends PageRoute<void> { Transp ...
- [C++ Primer Plus] 第9章、内存模型和名称空间(二)课后习题
一.复习题 2.using声明和using编译指令的区别 using声明: using std::cin; using std::cout; using std::endl; using编译指令:us ...