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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
vue实现动态按钮功能
May 13 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 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新手上路(七)
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
高级Java程序员面试题
2016/06/23 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
管理科学大学生求职信
2013/11/13 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
上课不认真检讨书
2014/09/17 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
财产分割协议书
2016/03/22 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python