乐趣区

关于javascript:vue任意关系组件通信与跨组件监听状态-vuecommunication

jiezi

大家好！我是木瓜太香！

家喻户晓，组件式开发方式给咱们带来了不便，不过也引入了新的问题，组件之间的数据就像被一道有形的墙隔开，如果咱们心愿长期让两个组件间接通信，vuex 太巨，而 $emit 又不好保护 provider 不可控 这个时候就该明天的配角 vue-communication 退场了！

vue-communication 介绍

  • 他是一个可观测可调试的 vue 组件通信计划
  • 任意关系组件可间接通信
  • 反对跨组件监听数据变动
  • 反对发送离线数据

装置

yarn add vue-communication
// 或者 npm install vue-communication -D

引入

import {$sender, $receiver} "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;

视频教程

<iframe src=”//player.bilibili.com/player.html?bvid=BV1sD4y1d7mD&page=1″ scrolling=”no” border=”0″ frameborder=”no” framespacing=”0″ allowfullscreen=”true” style=”min-height: 400px”> </iframe>

用法

基本概念：

该组件裸露两个次要 API 一个是发送者 $sender 一个是接受者 $receiver，所有的通信都通过这两个办法来实现，这里心愿大家将 $sender 了解成发送用意的发送者，他发送的是用意，用意就是心愿做一件什么事件。

用意类型：dataOnce modifyOnce data modify watch

目前只有以上 5 种用意别离涵盖了：发送数据的一次和屡次，批改数据的一次和屡次，跨组件监听数据变动

发送数据：

如果 A 组件只向 B 组件发送 一次 数据：

A 组件中间接应用 this.$sender("dataOnce-A-B",{d: "我是数据"})

B 组件中在任意时刻（哪怕 B 都还没挂载都行，释怀食用）应用this.$receiver("dataOnce-A-B") 这个函数返回一个 Promise 对象，间接 .then 接管即可

发送屡次就用 this.$sender("data-A-B","我是数据")，该办法调用屡次，对应组件就会屡次接管该数据

接管会有变动，因为会屡次接管所以无奈应用 Promise 来实现，请在参数追加回调this.$receiver("data-A-B",function(data){// data 就是数据})

留神：

这外面的 用意修饰符 - 组件 1 - 组件 2 的格局是强制的，不论你的组件名有多长，你都要残缺的给出！上面的批改数据也一样，对应到 data-A-B 这个案例，其整个字符串能够称为一个“用意”，data 叫做用意修饰符。

接管回执：

我置信大家都明确一个情理，如果委托 A 给 B 送货色，在 A 送到之后不应该默不吭声的就完了，而是应该通知你一声，嘿！你让我送的货色我曾经送到了哦！这就是回执。

须要留神的是回执目前只有在一次性操作中才会有，例如 dataOnce modifyOnce

他们通过 $sender返回的 Promise 对象给出，让发送者能够晓得，我发送的数据什么时候被接管了

this.$sender("dataOnce-A-B","木瓜太香")
.then(flag => {console.log("接受者曾经承受到数据了！")
})

批改数据：

A 组件中应用 this.$sender("modifyOnce-A-B","name","木瓜太香") 示意 A 组件要批改 B 组件中的 name 属性把他变为 木瓜太香

B 组件中应用 this.$receiver("modifyOnce-A-B","name") 即可实现批改，留神第二个参数必须传，这是一个许可，示意你认可 A 组件批改以后组件的 name 属性，如果你写错了或者没传那么许可不成立，这是一个让数据变动可预测也强制开发者须要更分明本人在做什么的一个实现。

如果你要改 obj 对象下的 name 那么能够写成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")

如果你要批改屡次能够参照 data 用意的示例，应用 modify 用意修饰符即可，留神，目前批改是没有回调的，如果你想晓得数据什么时候被批改，能够本人在组件外部监听。

跨组件监听数据：

如果 A 组件要监听 B 组件中的 name 数据变动：

A 组件应用 this.$sender("watch-A-B","person.name",function(nv,ov){// nv 示意新值 ov 示意旧值})

B 组件只须要给出一次许可即可：this.$receiver("watch-A-B","person.name")

我本人建了一个 web 前端的交换裙有趣味的能够退出进来交换哦：245650187（收费）237871108（免费）。
集体微信：GD6570 集体球球：718879459 当然你也能够哔哩哔哩搜寻木瓜太香

退出移动版