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停止输出代码
Jul 20 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
js 数组 fill() 填充方法
Nov 02 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 ajax 静态分页过程形式
2011/09/02 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery插件开发注意事项小结
2013/06/04 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
python实现图片批量剪切示例
2014/03/25 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
virtualenv介绍及简明教程
2020/06/23 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
教师节演讲稿
2014/05/06 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python