Vue组件间的通信pubsub-js实现步骤解析


Posted in Javascript onMarch 11, 2020

本文介绍使用发布订阅的方式进行vue组件间的通信

我认为这种方式比较自由, 不存在组件间的关系问题

1. 首先安装pubsub-js

npm install --save pubsub-js

2. 订阅方组件

import PubSub from 'pubsub-js'

mounted(){ // 执行异常代码
 // 订阅消息
 PubSub.subscribe('deleteTodo',(msg,index)=>{
  this.deleteTodo(index) // 调用deleteTodo方法执行真正的业务逻辑
 });
},

3. 发布方组件

<script>
 import PubSub from 'pubsub-js'
 export default{
  methods: {
   handlerEnter(isEnter){
    if (isEnter) {
     this.bgColor = 'gray';
     this.isShow = true;
    } else {
     this.bgColor = 'white';
     this.isShow = false;
    }
   },
   deleteItem(){
    // 表示从this对象中取出todo,index,deleteTodo三个对象
    const {todo, index, deleteTodo} = this
    if (window.confirm(`确认删除${todo.title}吗?`)) {
     // 发布消息
     PubSub.publish('deleteTodo', index); //deleteTodo一定要与订阅方名称一样,index是通信的具体数据
 
    }
 
   }
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
AngularJS入门之动画
Jul 27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
ES6中数组array新增方法实例总结
Nov 07 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
javascript实现画板功能
Apr 12 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
react中props 的使用及进行限制的方法
Apr 28 Javascript
Vue事件处理原理及过程详解
Mar 11 #Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 #Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 #Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 #Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 #Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 #Javascript
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
You might like
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
React实现轮播效果
2020/08/25 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python常用内置函数总结
2015/02/08 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
TCP/IP模型的分界线
2012/12/01 面试题
小学新教师培训方案
2014/02/03 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
组工干部演讲稿
2014/09/02 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android