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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
javascript编程起步(第二课)
Feb 27 Javascript
Javascript打印网页部分内容的脚本
Nov 17 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
js简单倒计时实现代码
Apr 30 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
node+express制作爬虫教程
Nov 11 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python实现类之间的方法互相调用
2018/04/29 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
《悯农》教学反思
2014/04/28 职场文书
我爱我家教学反思
2014/05/01 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015年招聘工作总结
2014/12/12 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers