(尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
组件订阅与发布(PubSubJS库)
npm info pubsub-js
安装库
npm install --save pubsub -js
===============================================================
1.订阅消息
PubSub.subscribe('msg',function(msg,data){})
2.发布消息
PubSub.publish('msg',data)
3.注意
1).优点:此方式可实现任意关系组件间通信(数据)
父辈,子孙,兄弟标签都可以
===================================================================
举例如下:





===================================================================
在哪儿去订阅消息?(订阅消息即接收消息)
绑定事件监听-------------------------------->订阅消息App.vue
触发事件-------------------------------------->发布消息
订阅消息相当于if操作,故操作在mounted(){}
(1).先引入PubSub包

(2).绑定消息名,回调函数
==================================================================
发布消息
(1).

需要触发回调函数的调用



this现在有问题,为什么?
因为现在回调函数室友PubSub管理的,this根本不知道是主键对象;
解决办法;将回调函数改为箭头函数

(尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))的更多相关文章
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- (尚030)Vue_案例_存储数据(localStorage本地存储技术)
当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
- (尚029)Vue_案例_交互footer组件功能
需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
- (尚028)Vue_案例_交互删除
删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
- (尚027)Vue_案例_交互添加
TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
- (尚026)Vue_案例_动态初始化显示(尚025)
(1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
- (尚025)Vue_案例_静态组件
页面效果展示截图: 第一步.首先拆分组件 (1).首先看一下是上下/左右结构 确定为:输入框+列表+底部; (2).确定名字 (3).创建对应的组件 ========================= ...
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
随机推荐
- Reliable Multicast Programming(PGM)协议
Reliable Multicast Programming (PGM)实际通用可靠多播协议,在某种程度上保证多播的可靠性.是IP上层协议,和TCP还有UDP同级,工作在传输层. 在组播传输视频项目中 ...
- 【题解】Largest Rectangle in a Histogram [SP1805] [POJ2559]
[题解]Largest Rectangle in a Histogram [SP1805] [POJ2559] [题目描述] 传送: \(Largest\) \(Rectangle\) \(in\) ...
- zabbix4.0 本地安装详解及步骤
安装前说明下,下面安装过程中涉及selinux部分仅供参考,可能会导致启动服务时产生各种报错,作者也是在折腾了无数日夜后报错不断而放弃治疗,直接永久关闭了selinux(啊,没有selinux的日子真 ...
- VSCode 命令
淘宝 NPM 镜像 https://npm.taobao.org/ Ctrl+~ 显示终端 npm start 启动项目 cnpm install 安装模块
- React生命周期中应该做什么事
React生命周期函数 装载组件触发 0.construct(props) 用来 props--->state 初始化state,并且把props转化为state 1.componentWill ...
- 2019 拉卡拉java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.拉卡拉等公司offer,岗位是Java后端开发,因为发展原因最终选择去了拉卡拉,入职一年时间了,也成为了面试官 ...
- css3中的calc的使用
最近在布局的时候遇到一个问题,在页面中的左侧是侧边栏,右边是内容区域,内容区域中有一个固定定位的标签页,在设置固定定位的标签设置宽度的时候应该是内容区域的宽度,而固定定位的时候相对于是窗口的宽度,所以 ...
- 解决javaScript在不同时区new Date()显示值不同问题
在日期格式化时遇到的问题,日期格式化方法在最下面 如果在中国时区 formatDate('2019-07-09') 结果是 ‘2019-07-09’ 如果 在夏威夷时区 utc-10:00 或 ...
- Java 使用properties配置文件加载配置
一般我们不把数据库的配置信息写死在代码中. 写好代码后,编译.调试,成功后只把输出目录中的东西(jar包..class文件.资源文件等)拷贝到服务器上,由运维来管理.服务器上是没有源文件的(.java ...
- Busness Client 客户端配置
1,打开Busness Client,点击新建按钮: 2,选择New System Connection(SAP Logon),这个是配置GUI登陆的,就相当于用BC登陆GUI. 这里就和GUI的配置 ...