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 学习 - 提高篇
Feb 02 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Django实现文件上传和下载功能
2019/10/06 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
化工机械应届生求职信
2013/11/04 职场文书
培训演讲稿范文
2014/01/12 职场文书
党员学习十八大感想
2014/01/17 职场文书
高中美术教学反思
2014/01/19 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
销售经理岗位职责
2015/01/31 职场文书
家长会感言
2015/08/01 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python