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是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...
随机推荐
- jquery判断字符长度 数字英文算1字符 汉字算2字符
<input type="text" maxlength="25" oninput="textlength(this)"> &l ...
- day20 python常用模块
认识模块 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用pytho ...
- vscode小程序代码高亮
vscode无法识别wxml,wxss语法: wxml文件设置: (1)任意打开一wxml文件,点击下方语言模式选择,这里已关联wxm所以当前显示wxml.默认关联为纯文本或者html或其他语法,点击 ...
- 信用评分卡(A卡/B卡/C卡)的模型简介及开发流程|干货
https://blog.csdn.net/varyall/article/details/81173326 如今在银行.消费金融公司等各种贷款业务机构,普遍使用信用评分,对客户实行打分制,以期对客户 ...
- WC.exe【C】
gitee传送门!!!(电脑打不开github,多次尝试未果,决定先用gitee存着先) 项目要求 wc.exe 是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序 ...
- 【转载】pycharm破解,可使用到2099年.pycharm版本 pycharm-professional-2016.3.1
1. Pycharm的安装方法,论坛很多,这里就不赘述了.参照:http://blog.csdn.net/qq_29883591/article/details/52664478 2. 下载Pycha ...
- Java多线程编程的常见陷阱
.在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...
- C博客第02次作业---循环结构
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量 1.2 本章学习体会及代码量 1.2.1 学习体会 1.这两周的学习懂得了循环结构的使用方法,懂得了在什么时候应该使用循环结构来处理问 ...
- oracle数据库更改字符集为utf-8,亲测有效
>shutdown immediate; (把database停了) >startup mount; (把database重开) >alter system enable restr ...
- php,js 对字符串按位异或运算加密解密
异或的符号是^.按位异或运算, 对等长二进制模式按位或二进制数的每一位执行逻辑按位异或操作. 操作的结果是如果某位不同则该位为1, 否则该位为0. xor运算的逆运算是它本身,也就是说两次异或同一个数 ...