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 相关文章推荐
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
浅谈React 服务器端渲染的使用
May 08 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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实现Ftp用户的在线管理
2012/02/16 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
js创建数组的简单方法
2016/07/27 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python构造函数init实例方法解析
2020/01/19 Python
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
幼儿园老师辞职信
2014/01/20 职场文书
教学实习自我评价
2014/01/28 职场文书
给校长的一封建议书
2014/03/12 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年国庆节寄语
2015/08/17 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL