首页 > 其他分享 >vue——消息订阅与发布(pubsub)

vue——消息订阅与发布(pubsub)

时间:2022-08-28 19:00:27浏览次数:48  
标签:订阅 vue 发布 消息 组件 接收数据 pubsub

一.消息订阅与发布:

  一种组件间通信的方式,适用于任意组件间通信

  1. 订阅消息:设置消息名==>接收数据的组件进行订阅消息
  2. 发布消息:传递消息内容==>传递数组的组件进行发布消息

二.使用步骤

  1. 安装pubsub:npm i pubsub-js
  2. 在使用订阅消息与发布消息的组件引入:import pubsub from 'pubsub-js'  
  3. 接收数据:this.pid = pubsub.subscribe('xxx',this.demo) A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身
  4. 提供数据:pubsub.publish('xxx',数据)
  5. 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅。

三.案例

订阅消息组件(接受数据的组件)

 发布消息组件(传递数据的组件)

 

标签:订阅,vue,发布,消息,组件,接收数据,pubsub
From: https://www.cnblogs.com/MDRY/p/16633386.html

相关文章

  • vue——全局事件总线(GlobalEventBus)
    一.什么是全局事件总线?1.一种组件间通信的方式,适用于任意组件间通信。是根据VueComponent.prototype.__proto__=Vue.prototype的原理来进行全局引用二.全局事件总线......
  • Vue3.0 编译做了哪些优化
    a.生成BlocktreeVue.js2.x的数据更新并触发重新渲染的粒度是组件级的,单个组件内部需要遍历该组件的整个vnode树。在2.0里,渲染效率的快慢与组件大小成正相关:组......
  • vue 的生命周期
    生命周期就是vue从开始创建到销毁的过程,分为四大步(创建,挂载,更新,销毁),每一步又分为两小步,如beforeCreate,created。beforeCreate前,也就是newVue的时候会初始化事件和......
  • vue3 基础-条件渲染 v-if 和 v-show
    本篇讲vue中对dom元素节点进行"显示和隐藏"的实现方式指令,即v-if和v-show.其实一句话就能说明白,v-if的底层是从dom树中增删节点;而v-show的底层是"di......
  • 关于vue的css样式对js动态添加的dom节点不生效问题的解决方法
    一、问题描述开发的时候免不了有时候需要向某个节点appendchild,添加子节点,但是如果是在vue中,就会发现通过操作dom的appendchild方式添加节点会出现样式对这些新增的节点......
  • Vue3+vite+js 配置别名@报错
    Vue3+vite+js配置别名@报错vue3项目中配置vite.config.js时使用path模块报错,一直警告找不大到path模块原因:path模块是node.js内置的功能,但是node.js本身并不支持ts解决......
  • 【面试题】Vue中的$router 和 $route的区别
    Vue中的$router和$route的区别点击视频讲解更加详细this.$route:当前激活的路由的信息对象。每个对象都是局部的,可以获取当前路由的path,name,params,query等属性......
  • vue中props定义对象和数组的区别
    扯开怎么定义,为什么要定义props,相信小伙伴们都知道,都会用了,但是有个问题,为什么有时候定义的是数组形式,有时候是对象形式呢?一句话:props对象形式才能给默认值和类型和必填......
  • VUE 笔试题随笔-01
    vue的8个⽣命周期函数?1.beforeCreated2.created3.beforeMount4.mounted5.beforeUpdate6.updated7.beforeDestory8.destoryedv-show与v-if的区......
  • vue3项目-小兔鲜儿笔记-02-首页模块01
    1.less自动化导入安装一个vue-cli插件,自动导入less文件vueaddstyle-resources-loader2.头部分类导航组件渲染实现头部一级分类和二级分类的渲染基本步骤:定......