vue任意关系组件通信与跨组件监听状态vue-communication

众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,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="https://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")

到此这篇关于vue任意关系组件通信与跨组件监听状态vue-communication的文章就介绍到这了,更多相关vue 任意关系组件通信与跨组件监听状态内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-10-17

vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

详解Vue 非父子组件通信方法(非Vuex)

一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

Vue.js每天必学之组件与组件间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

vue2利用Bus.js如何实现非父子组件通信详解

前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

Vue组件通信之Bus的具体使用

关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也

Vuejs第十篇之vuejs父子组件通信

本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

详解vue跨组件通信的几种方法

在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

如何使用vuex实现兄弟组件通信

前言 vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦. 下面这篇文章就来给大家介绍下vuex兄弟组件通信的方法,下面话不多说了,来一起看看详细的介绍吧 1. 核心想法 使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一),将每个子组件的数据都存放进去,每个子组件都从vuex里获取数据,其实就是一句话--把vuex作为一个桥 2. 具体代码 父组件App.vue <templat

Vue 兄弟组件通信的方法(不使用Vuex)

项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

vue2.0s中eventBus实现兄弟组件通信的示例代码

vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是

vue实现父子组件之间的通信以及兄弟组件的通信功能示例

本文实例讲述了vue实现父子组件之间的通信以及兄弟组件的通信功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue父子组件通信.兄弟组件通信</title> <style> *{ margin: 0; padding: 0; l

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

vue中组件通信的八种方式(值得收藏!)

前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

vue组件通信传值操作示例

本文实例讲述了vue组件通信传值操作.分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> <span>{{parentMessage}}</span> </div> </template> <script> export default{ props: ['parentMes

Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)

前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.

vue 解决兄弟组件、跨组件深层次的通信操作

兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是: 把兄弟组件内部的变量提升到一个中央仓库. 借助父级组件链式交互 使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件,这样的链式操作,在子组件不多的时候,但是一个不错的解决方法 子组件1 <template> <div> <p @click="$emit('fromFirst','来自A组件')">first组件&