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 相关文章推荐
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
js实现点击选项置顶动画效果
Aug 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
单利模式及python实现方式详解
2018/03/20 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python列表list排列组合操作示例
2018/12/18 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
销售业务员岗位职责
2014/01/29 职场文书
如何撰写岗位职责
2014/02/01 职场文书
离婚协议书格式
2014/11/21 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书