vue组件间通讯方法4-发布订阅模式
代码地址：
https://github.com/hurong241/vue_study/tree/master/vue2-cli/src/components/86
1、先要安装:npm i pubsub-js
2、要发布和订阅的组件中引入
import pubsub from 'pubsub-js'
3、需要发布消息的组件通过事件触发methods中的方法，发送一个名为pubsub-test的消息
methods: {
//发布订阅方式发送消息
pubSubTest(){
pubsub.publish('pubsub-test','total:'+this.total)
}
}4、接收组件中，接收一个名为pubsub-test的消息，并将消息id保存：this.pubsubTestId，beforeDestroy中取消订阅，注意这里回调的写法，不然拿到的this是发布消息的组件实例而不是vm
mounted() {
//订阅一个消息
this.pubsubTestId=pubsub.subscribe('pubsub-test', (msgName, data)=>{
alert('pubsub:收到消息,消息名:'+msgName+','+'数据:'+data)
})
},
beforeDestroy() {
//取消订阅
pubsub.unsubscribe(this.pubsubTestId)
}赞:(0)
踩:(0)
- 相关文章
- 初识vue
- 数据绑定：第一个vue例子
- vue模板语法
- vue数据绑定
- el与data的两种写法/延迟挂载
- vue数据代理-Object.definePropert
- vue事件及事件修饰符prevent/stop/
- vue计算属性computed
- vue(深度)监视属性watch
- vue绑定样式:class,:style
- 热门文章
- win7中将文件拷贝到虚拟机linux下
- phpexcel设置行高及列宽,背景颜色,
- rabbitmq无法启动
- intellij idea不显示git push按钮
- php7中使用mongodb的aggregate进行
- centos7.4 64位下swoole安装及配置
- laravel页面静态化的方法
- navicate连接mycat报1184错误
- 单点登录sso原理及php实现方式及de
- devops-jenkins容器为pending状态
- 好评文章
- phpexcel设置行高及列宽,背景颜色,
- php7中使用mongodb的aggregate进行
- intellij idea打开文件所在文件夹
- windows下使用MongoDB Compass Com
- win7中将文件拷贝到虚拟机linux下
- laravel 中悲观锁 & 乐观锁的使用
- 单点登录sso原理及php实现方式及de
- navicate连接mycat报1184错误
- rabbitmq无法启动
- laravel整合dingo/api方法步骤:jwt
- 我的项目
- 【github】www.github.com/hurong241
- 【码云】gitee.com/hu_rong/projects
- 【docker hub】hub.docker.com/repositories/hurong241
- 【packagist】packagist.org/users/hurong241/packages
- 站点信息
- 建站时间：2011年
- 文章数：608篇
- 浏览数：952674
