Vue3 中使用Event Bus

更新日期: 2022-04-12阅读: 1.1k标签: 通讯

vue 2 中要进行跨元件通讯,除了Vuex 以外的另一个常见手法是Event Bus,对于小型专案来说Event Bus 相当方便,仅需要$on、$emit两个语法就能进行跨元件通讯。而Vue 3 中移除了$on、$off等语法,因此Event Bus 也等同于被移除。

在Vue 3 的官方文件中也有提如果有类似的功能需求,可以参考相关的套件 mitt 或tiny-emitter,两者运作上差异不大,在此就针对 mitt 来进行介绍。


mitt

mitt套件可用于Vue 3,但不仅限于在Vue 应用中使用,当有跨模组的沟通功能时都可以引用此套件,优点是写法及运用上都会与Vue 2 的Event bus 相当接近(而且不需要在Vue 的Prototype 上加入额外的方法)。

mitt: https://github.com/developit/mitt


范例程式码:

汇入mitt 的元件并调用它。

const emitter = mitt();

建立html 结构,并且加入两个元件,本范例中会将 component-a 的资料传送至component-b。

<div id="app">
  <component-a></component-a>
  <hr>
  <component-b></component-b>
</div>

元件component-a,会使用 emitter.emit 的方法推送资料至另一个元件上。

app.component('component-a', {
  data() {
    return {
      text: '這有一段話'
    }
  },
  template: `<div>{{ text }} <button type="button" @click="pushData">發送至另一個元件</button></div>`,
  methods: {
    pushData() {
      emitter.emit('getData', this.text);
    }
  }
});

在 component-b 制作监听,使用 emitter.on 接收来自于 component-a 的资料。

app.component('component-b', {
  data() {
    return {
      text: '原始資料'
    }
  },
  template: `<div>{{ text }}</div>`,
  created() {
    emitter.on('getData', (msg) => {
      this.text = msg;
    });
  }
});

可点击画面中的「发送至另一个元件」,component-a的text 将会透过事件 getData 传递至component-b。


链接: https://fly63.com/article/detial/11501

IM即时通讯方案之第三方有哪些?

选择第三方即时通讯方案,我们应该从以下方面进行考虑:稳定性: 安全性: 功能性: 费用: 运维服务等,有哪些第三方IM即时通讯呢?比如:融云、JPush极光推送、网易云信、环信、云旺OpenIM等

https提供安全web通讯的原理

加密算法的分类:对称加密和非对称加密;如果选择对称加密,密码的共享(传输)过程不安全;如果选择非对称加密,加密速度慢。一个完美的解决方案:用对称加密的密钥用于加密数据,用户非对称加密来保护对称加密的密钥,

HTML5 之跨域通讯(postMessage)

window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号( 443 为 https 的默认值)

NodeJs 实现简单WebSocket 即时通讯

服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,然后就可以开始建立服务器了,因为有了nodejs-websocket模块

H5与App的通讯方式

现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式的应用也是我们常说的Hybrid App。为什么会出现Hybrid App呢,早期是因为开发一个Android或iOS的客户端,需要的人力成本比较大,开发周期比较长

angular组件间通讯

一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统。组件之间有几种典型的关系:父子关系、兄弟关系、没有直接关系

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!