循环 抖音 vue开发 jquery查找子元素 mysql在线测试 js获取数组第一个元素 idea大小写转换快捷键 oracle删除表字段 多线程实现方式 完美解决cpu利用率低 python语言 python实战 python基础知识 java接口文档 java的环境配置 java基础框架 java数组 java数组转集合 java读取文件 php案例 计算机电子书 vbs脚本 win10长期服务版 微信摇骰子表情包 mac画图软件 c语言程序100例 超星网课助手 海妖花粉哪里多 java字符串截取 js小数点保留2位 polyworks 视频编辑专家下载 苏拉玛起义的任务线 linux安卓模拟器 js递归函数 模拟邻居 计划任务软件 梦想世界答题器 dnf传说 mysql数据库恢复
当前位置: 首页 > 学习教程  > 编程语言

24-vue中组件的通信方式之一:消息的订阅与发布的使用、 pubsub-js库的安装

2021/2/13 16:29:06 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

1.pubsub-js库的安装 使用 消息订阅与发布,先在对应的项目中Terminal里安装pubsub-js库 1、查看pubsub-js 库是否已经存在该库命令: npm info pubsub-js2、若不存在,则先安装pubsub-js 库,命令如下: npm install --save pubsu…

1.pubsub-js库的安装

使用 消息订阅与发布,先在对应的项目中Terminal里安装pubsub-js库

1、查看pubsub-js 库是否已经存在该库命令:

npm info pubsub-js

2、若不存在,则先安装pubsub-js 库,命令如下:

npm install --save pubsub-js

**注意:**上面两条命令,在vue项目的终端Terminal中输入

2.消息的订阅与发布的使用

优点:

  消息订阅与发布 优点: 父子通信 、逐层通信、兄弟组件通信 等等都可以,没有"位置"上的限制,摆脱逐层传递的限制, 直接进行跨组件传递信息(例如函数的调用)

理解:
  订阅消息 相当于 绑定事件监听
  发布消息 相当于 发布消息

使用:

  消息的订阅:PubSub.subcribe(“函数名”,(msg,函数参数)=>{
函数体//可以在methods中声明定义
})
  消息的发布:PubSub.publish(“函数名”,函数参数)

代码示例:

父组件代码:

mounted () {//执行异步代码
  
      //订阅消息      subcribe("事件名",回调函数<尽量使用箭头函数,调用外部的this>)
PubSub.subcribe("事件名",(msg,index)=>{   // msg:事件名
	函数体 //可以在methods中声明定义
})

子组件代码:

methods:{
	// 发布消息
	PubSub.publish("deleteTodo",index);
}

本文链接: http://www.dtmao.cc/news_show_700047.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?