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操作Radio方法小结
Oct 20 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
python实现决策树ID3算法的示例代码
2018/05/30 Python
python实现批量图片格式转换
2020/06/16 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
市场专员岗位职责
2014/02/14 职场文书
开学典礼感言
2014/02/16 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
股份转让协议书
2014/04/12 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
运动员入场词
2015/07/18 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android