类似于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使用的更多相关文章

  1. vue eventBus 跳坑的办法

    前言(feihua): 最近闲来没事写了一个小的demo,在小的数据传输上没有必要去使用vuex,对于非父子组件的传值方法总结了一点心得体会供大家参考(如有太low,还请大神别喷俺) 先上官方文档: ...

  2. 13.vue组件

    vue组件(一) 组件嵌套: 1.全局嵌套: <!doctype html> <html> <head> <meta charset="utf-8& ...

  3. vue组件知识总结

    vue组件化开发 将一个页面分割成若干个组件,一个页面js+css+html,将自己类容分割出来,方便开发,更好了维护我们的代码,每个组件封装自己的js+html+css,样式命名冲突 组件分类 页面 ...

  4. vue项目的一些最佳实践提炼和经验总结

    项目组织结构 ajax数据请求的封装和api接口的模块化管理 第三方库按需加载 利用less的深度选择器优雅覆盖当前页面UI库组件的样式 webpack实时打包进度 vue组件中选项的顺序 路由的懒加 ...

  5. 事件总线(EventBus)

    Vue.prototype.$EventBus = new Vue() 不建议用,尽量用vuex,eventbus过于消耗浏览器资源 傻瓜版状态管理 一般的状态传递是在同时显示的情况下,倘若是在不同时 ...

  6. React / Vue 跨端渲染原理与实现探讨

    跨端渲染是渲染层并不局限在浏览器 DOM 和移动端的原生 UI 控件,连静态文件乃至虚拟现实等环境,都可以是你的渲染层.这并不只是个美好的愿景,在今天,除了 React 社区到 .docx / .pd ...

  7. vue + typescript,定义全局变量或者方法

    众所周知,在 vue中,如果想定义一个全局变量的方法很简单,直接在 vue的原型上挂载属性或者方法即可. 但是,加上了typescript之后, Vue.prototype.$xxx = xxx  这 ...

  8. js 整理 前端知识点 前端面试题 (2020)(vue)

    数据类型 字符串(String).数字(Number).布尔(Boolean).对空(Null).未定义(Undefined).Symbol. 引用数据类型:对象(Object).数组(Array). ...

  9. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

随机推荐

  1. php通过phpize安装扩展

    //下载libevent扩展文件压缩包(在当前系统哪个目录下载随意) ~# wget http://pecl.php.net/get/libevent-0.1.0.tgz //解压文件 ~# tar ...

  2. ubuntu装好jupyter启动失败问题

    ::/jupyter/nbserver-.json: [Errno ] Permission denied: '/run/user/1000/jupyter/nbserver-35390.json' ...

  3. JavaScript之基础语法整理

    1.数据类型(number,boolean,string,null,undefined,symbol,object) es是动态语言,弱类型语言,虽然先声明了变量,但是变量可以重新赋值任意类型 弱类型 ...

  4. 279. Perfect Squares(动态规划)

    Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...

  5. hdu4779 组合计数+dp

    提交 题意:给了n*m的网格,然后有p个重型的防御塔,能承受1次攻击,q个轻型防御塔不能接受任何攻击,然后每个防御搭会攻击他所在的行和所在的列,最后求在这个网格上放至少一个防御塔的方案数, 我们枚举 ...

  6. CSS图形

    1.正方形 最终效果:   CSS代码如下: #square { width: 100px; height: 100px; background: red; }    2.长方形 最终效果:   CS ...

  7. CentOS6.5 切换 图形界面 与 命令行界面

    CentOS6.5 切换图形界面与命令行界面 [1]场景1:图形界面 -> 命令行界面 方式一(快捷键):Ctrl + Alt + F2 方式二(终端命令):init 3 (PS:init与3之 ...

  8. liunx驱动----构造和运行模块

    以hello world模块为例 #include <linux/init.h> #include <linux/module.h> //在执行 insmod hlello 的 ...

  9. 在自定义目录下,按日期创建excel文件

    在指定文件目录下,新建以当前日期命名的excel 文件,如果文件已经存在,在文件中新建一个sheet页来存放数据 import datetime import xlrd, xlwt import re ...

  10. 1.4:SubShader

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 在了解了渲染流水线之后,我们可以开始SubShader的学习了. 什么是S ...