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 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
vue组件入门知识全梳理
Sep 21 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
Open and Print a Word Document
2007/06/15 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JS之相等操作符详解
2016/09/13 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
装潢设计实习自我鉴定
2013/09/19 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
职业生涯规划书范文
2014/03/10 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
环保志愿者活动总结
2014/06/27 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
学校施工安全责任书
2015/01/29 职场文书
团员自我评价范文
2015/03/10 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书