(尚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 ...
随机推荐
- python基础知识的学习和理解
参考链接:https://github.com/yanhualei/about_python/tree/master/python_learning/python_base python基础知识笔 ...
- Python格式化输出——format用法示例
format OR % 提到Python中的格式化输出方法,一般来说有以下两种方式: print('hello %s' % 'world') # hello world print('hello {} ...
- JS异步操作概述(转)
add by zhj: 只转载了一部分.异步操作的三种模式未转载,因为里面代码比较多,复制过来麻烦 原文:https://wangdoc.com/javascript/async/general.ht ...
- Java学习:方法重载的使用规则
方法的重载 对于功能类似的方法来说,因为参数列表不一样,却需要记住那多不同的方法名称,太麻烦. 方法的重载(Overload):多个方法的名称一样,但是参数列表不一样.好处:只需要记住唯一一个方法名称 ...
- mysql数据库事务
事务: 一个或者一组sql语句组成一个执行的单元,这个单元要么全都执行,要么都不执行.也就是每个sql语句相互依赖.如果中间有一条出现错误则整个单元将回滚.(回滚就是刚刚的操作都撤销) 事务的属性: ...
- c++打印实心菱形,空心三角形,十字星,空心正方形,实心平行四边形
今天翻资料的时候,无意间发现了一个文件,是刚接触编程的时候用c++写的一段程序,我称之为"图形打印机",想着把所有图形都打印出来,后来发现其实每种图形的代码都是一个思路,就不想做重 ...
- Entity Framework 学习系列(3) - MySql Code First 开发方式+数据迁移
目录 # 写在前面 一.开发环境 二.创建项目 三.安装程序包 四.创建模型 五.连接字符串 六.编辑程序 七.数据迁移 写在最后 # 写在前面 这几天,一直都在学习Entity Framework ...
- MySQL基础-2
目录 配置文件的使用 表的分类--数据库引擎 简单的表的增删改查(CRUD) 创建表的完整写法 Mysql中的数据类型 数字类型 字符串类型 枚举和集合 时间和日期 配置文件的使用 大家发现每次进入m ...
- Beego 学习笔记7:JS分页
JS分页 1> JS分页,业务逻辑 (1) 分页采用的是一个叫jquery.pagination.js的一个jquery插件 (2) 需要jquery的支持,此项目中使用 ...
- 生意bisynes单词bisynes商业
英语bisynes商务概念的提出是改革的产物,有一个演变的过程:贸易部--商业部.外贸部--内贸部--内贸局--商务部.是内外贸一体化的概念. 中文名:商务 外文名:Business,Bisynes商 ...