组件订阅与发布(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库))的更多相关文章

  1. (尚034)Vue_案例_数据存储优化(代码优化!!!)

    最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...

  2. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  3. (尚030)Vue_案例_存储数据(localStorage本地存储技术)

    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...

  4. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...

  5. (尚028)Vue_案例_交互删除

    删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...

  6. (尚027)Vue_案例_交互添加

    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...

  7. (尚026)Vue_案例_动态初始化显示(尚025)

    (1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...

  8. (尚025)Vue_案例_静态组件

    页面效果展示截图: 第一步.首先拆分组件 (1).首先看一下是上下/左右结构 确定为:输入框+列表+底部; (2).确定名字 (3).创建对应的组件 ========================= ...

  9. (尚024)Vue_案例_交互删除

    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...

随机推荐

  1. MVVM模式理解(转)

    原文https://www.cnblogs.com/goloving/p/8520030.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心 ...

  2. python利用dijkstra算法求解图中最短距离

    利用dijkstra算法,来完成图中两个顶点间最短的距离,可以直接复制使用,只需要修改参数即可 def dijkstra_raw(edges, from_node, to_node): "& ...

  3. maven添加本地包命令mvn install:install-file

    mvn install:install .jar -Dfile:要注册的jar,绝对路径

  4. [转] Vue原理解析——自己写个Vue

    一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...

  5. 推荐一个GOLANG入门很好的网址

    推荐一个GOLANG入门很好的网址,栗子很全 https://books.studygolang.com/gobyexample/

  6. AQS原理解析 AbstractQueuedSynchronizer

    AQS实现原理  https://blog.csdn.net/ym123456677/article/details/80381354   https://www.cnblogs.com/keleli ...

  7. CLR学习之初识CLR

    一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...

  8. java中的进制与操作符

    直接常量 double: 111d,111D 二进制:前缀为0b 十六进制:前缀为0x或0X,后面最大9位. 八进制:前缀为0,后面最大7位. 按位操作符 与(&): 或(||): 异或(^) ...

  9. Spring Boot 的自动配置探究、自制一个starter pom

    //TODO @Conditional @Condition

  10. 关于Mysql datetime类型存储范围测试

    创建一个datetime表 > create table date_time(time datetime); > desc date_time; +-------+----------+- ...