关于 Vue 中 我对中央事线管理器的(enentBus)误解
由于这段时间公司比较闲,就对vue 中的一些模糊的点做了一些加强,突然就想到了常挂在嘴边兄弟组件传值
我理解的兄弟组件的传值是可以跨理由传值的,比如我从http://localhost:8080/login 里面的值可以传递到 http://localhost:8080/home 这个页面的
于是我是www.baidu.com 了一番,没错,跟我想象一样的,可以进行页面传值, 于是呼我就跟着百度一番操作
像这样:

于是我建了一个 bus.js
import Vue from 'vue' export const EventBus = new Vue()
像这样:

于是我在我的 login.vue 里面绑定了一个 $emit
import { EventBus } from '../../bus'
clickLgin() {
console.log(EventBus)
EventBus.$emit('add', '123456789')
}
像这样:

于是我在我的home.vue 添加 $on
import { EventBus } from '../../bus'
created() {
EventBus.$on('add', target => {
console.log(target, '222')
})
}
到这儿该结束了,可以愉快的拿到 login.vue 页面传递过来的 222 了吧, 嘿,不行,空的,不打印
后来几经周折,我发现,当我 第一次从login 页面进入 home 页面,$on 是没有触发的, 我从home 页面退到 login页面,再从 login 进入home 页面,也就是 第二次进入home 时,能传递值了,这就是神奇的地方
我不知道这些博主在写 东西时有没有自己实践,如果你们实践了能传递,那是我菜不会用,如果没有,我只想说害人
总结:
eventBus 是给兄弟组件传值的,不是给模块传值的,当从A页面进入另B页面时, B页面时没有实例化的,也就是说 $on 监听是不存在的,兄弟组件也是不存在的, 当B页面实例化之后,$on 他才开始监听,可是这是并没有
谁自定义事件,所有事空值, 当我们再次退回A页面时,由于浏览器缓存机制,B页面的代码得以缓存,监听依旧存在,我们在A 页面自定义事件后,会到B 页面,也就监听到了 A页面的自定事件,所以得到值
ps: 如果对我此次总结的问题有所异议,请您先实践,如果是可以传值的,请练习我,将代码发给我,我验证没问题会删除博客,如果有需要还会为我的无知道歉
关于 Vue 中 我对中央事线管理器的(enentBus)误解的更多相关文章
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- python2.7高级编程 笔记一(Python中的with语句与上下文管理器学习总结)
0.关于上下文管理器上下文管理器是可以在with语句中使用,拥有__enter__和__exit__方法的对象. with manager as var: do_something(var) 相当于以 ...
- Vue中引入TradingView制作K线图
**前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...
- MVC中的 程序集添加-----程序包管理器控制台
Install-Package Microsoft.AspNet.WebApi.Owin -Version Install-Package Microsoft.Owin.Host.SystemWeb ...
- entityframework分布式事务中遇到的 “与基础事务管理器的通信失败”的解决方法
首先是ef的多数据库操作实现事务的方法 public int AddDifferenceDB(userinfo1 user1, userinfo user) { ; using (var test2D ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- 深入理解 Python 中的上下文管理器
提示:前面的内容较为基础,重点知识在后半段. with 这个关键字,对于每一学习Python的人,都不会陌生. 操作文本对象的时候,几乎所有的人都会让我们要用 with open ,这就是一个上下文管 ...
- Python中的上下文管理器和with语句
Python2.5之后引入了上下文管理器(context manager),算是Python的黑魔法之一,它用于规定某个对象的使用范围.本文是针对于该功能的思考总结. 为什么需要上下文管理器? 首先, ...
随机推荐
- 日常破解---XCTF_APP1获取flag记录
日常破解---XCTF_APP1获取flag记录 一.题目来源 来源:XCTF社区安卓题目app1 二.解题记录 1.首先安装到模拟器中运行一下,如下图所示,点击一下按钮,弹出提示年轻人不 ...
- DEV GridControl控件使用(CheckBox全选、操作按钮、事件处理,获取值)
1.GridControl控件使用 (1)绑定数据源 //绑定DataTable gridControl1.DataSource = DbHelper.ExecuteDataTable("S ...
- 数据挖掘入门系列教程(四)之基于scikit-lean实现决策树
目录 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理Iris 加载数据集 数据特征 训练 随机森林 调参工程师 结尾 数据挖掘入门系列教程(四)之基于scikit-lean决策树处理 ...
- 吃透这份pdf,面试阿里、腾讯、百度等一线大厂,顺利拿下心仪offer!
前言 最近一位年前裸辞的朋友来找我诉苦,说因为疫情原因现在都在家吃老本.本想着年后就来找工作的,但是现在这个情况也不好找,而且很多公司也随着这次疫情面临着资金紧缺导致裁员严重的甚至倒闭,导致很多人失业 ...
- h5微信中视频禁止全屏
<video id="videoPlayer" v-show="isShowVideo" class="video" ref=&quo ...
- css3特性简要概括
---恢复内容开始--- css3新增核心知识 背景和边框 文本效果 2d/3d转换 过渡和动画 多列布局 弹性盒模型 媒体查询 增强选择器 css3浏览器兼容性 css3在线工具 css3gener ...
- 扩展el-input 加一个控制精度的命令(directives)
使用el-input时 出现需要精度控制的需求,因为每一个el-input需要精度不用 所以我给这个虚拟dom绑定了一个精度值,根据这个值去控制精度. 下面附上代码: html: <el-inp ...
- 小白学 Python 数据分析(17):Matplotlib(二)基础操作
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- Java-字节输入输出。(新手)
参考手册: BufferedInputStream BufferedOutputStream 实例: import java.io.*; /* * 文件的复制方式 * 1 字节流读写单个字节 * 2 ...
- 「newbee-mall新蜂商城开源啦」GitHub 上最热门的 Spring Boot 项目,我也要做一次靓仔!
没有一个冬天不可逾越,也没有一个春天不会到来. 介绍一下新蜂商城的近况,同时,新蜂商城 Vue 版本目前也在开发中,在这篇文章里我也向大家公布一下新蜂商城 Vue 版本的开发进度,和大家同步一下,在不 ...