关于 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的黑魔法之一,它用于规定某个对象的使用范围.本文是针对于该功能的思考总结. 为什么需要上下文管理器? 首先, ...
随机推荐
- spring boot actuator服务监控与管理
1.引入actuator所需要的jar包 <dependency> <groupId>org.springframework.boot</groupId> < ...
- sonarqube配置全指南,集成阿里巴巴p3c规范
环境准备 内置数据库 Sonar安装成功后,默认内置H2数据库,用于记录单次的扫描结果,对同一个project重复扫码,会覆盖之前的扫描记录,所以H2 数据库只应用于测试,不可以用于生产环境,那如果你 ...
- GitHub 热点速览 Vol.11:回暖的 GitHub 迎来上千星的图片流项目
作者:HelloGitHub-小鱼干 摘要:连着两周成绩平平的 GitHub Trending 榜,终于和三月的天气一样进入全面变暖的模式,无论是本周刚开源搭乘 ocr 热点并获得 1,500+ st ...
- 一起了解 .Net Foundation 项目 No.19
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Salesforce To ...
- C++ 按行读取文件并打印
#include<iostream> #include<fstream> #include<string> #include <vector> #inc ...
- Checkbox 勾上 不让勾下 同步手动刷新复选框状态 iview
<Checkbox v-show="!disabledForm" ref="youwubianhuaRef" :value="youwubian ...
- vue-autoui自匹配webapi的UI控件
vue-autoui 是一款基于vue和element扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-form和auto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的 ...
- Ruby中的Hash(哈希),你可以理解为字典
原文链接 以下代码在Ruby 2.5.1中编译通过 定义 myHash = Hash.new myHash1 = Hash["key1" => 100, "key2 ...
- ORM单表查询,跨表查询,分组查询
ORM单表查询,跨表查询,分组查询 单表查询之下划线 models.Tb1.objects.filter(id__lt=10, id__gt=1) # 获取id大于1 且 小于10的值models ...
- Linux Namespace 入门系列:Namespace API
Linux Namespace 是 Linux 提供的一种内核级别环境隔离的方法.用官方的话来说,Linux Namespace 将全局系统资源封装在一个抽象中,从而使 namespace 内的进程认 ...