关于 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的黑魔法之一,它用于规定某个对象的使用范围.本文是针对于该功能的思考总结. 为什么需要上下文管理器? 首先, ...
随机推荐
- php Rabbitmq扩展安装坑点
pecl install amqp 出现 checking for amqp using pkg-config... configure: error: librabbitmq not found 这 ...
- markdown简明语法1
目录 Cmd Markdown 简明语法手册 1. 斜体和粗体 2. 分级标题 3. 外链接 4. 无序列表 5. 有序列表 6. 文字引用 7. 行内代码块 8. 代码块 9. 插入图像 Cmd M ...
- 基于Canal和Kafka实现MySQL的Binlog近实时同步
前提 近段时间,业务系统架构基本完备,数据层面的建设比较薄弱,因为笔者目前工作重心在于搭建一个小型的数据平台.优先级比较高的一个任务就是需要近实时同步业务系统的数据(包括保存.更新或者软删除)到一个另 ...
- 爬虫使用中间代理人 fiddl...,charles,mitmproxy 设置
一般的设置在网上就能找到(端口,ip啥的) 但是难点是关于安卓手机证书 在网上找到的几种方法,一种是在app源码中添加设置让手机app同意你下载安装的证书,另一种则是root_adb 安装证书 但是太 ...
- JavaMail(一):利用JavaMail发送简单邮件
JavaMail,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.但它并没有包含在JDK中,要使用JavaMail首先要下载ja ...
- 推荐一个学习python非常好的网站
推荐一个入门python非常好的网站(也可以学习JAVA)非常适合入门,不说多易于理解,也是比较亲民的0基础学习教程,还免费…… 网址:https://www.liaoxuefeng.com/(廖雪峰 ...
- Python3对比合并Excel表格
##安装模块pip install pandas as pdpip install xlsxwriterpip install openpyxl ##带入模块import pandas as pdim ...
- Button相关设置
2020-03-11 每日一例第4天 1.添加按钮1-6,并修改相应的text值: 2.窗体Load事件加载代码: private void Form1_Load(object sender, Ev ...
- axios请求拦截器
import axios from 'axios'; // 创建axios实例 let service = null; if (process.env.NODE_ENV === 'deve ...
- linux php 安装libiconv过程与总结
问题:在嵌入式linux 已经安装好的php的情景下,需要安装一个扩展库libiconv 背景:从后台传的数据含有中文(gbk2312)的通过json_encode 显示为null,查阅资料发现jso ...