vue-bus实现兄弟组件通讯

JavaScript08

vue-bus实现兄弟组件通讯,第1张

一、为什么要使用vue-bus?

学习vue的开发者都知道,父子组件的直接的通讯直接使用vue提供的props属性和emit方法。props接受来自父组件的参数,emit将子组件的参数传递给父组件。这样一来父子组件之间的参数传递就得到了解决。(之前做项目的时候看到$parent和$children也可以进行父子组件和兄弟之间的参数传递,但是不提倡,原因在于如果组件想要替换位置就有问题)。

那么问题来了,兄弟组件如何进行通讯?有哪些方法

1、vuex全局状态管理

2、bus总线机制/发布订阅者模式/观察者模式

两者相比较,前者适用于大型项目的开发,如果项目业务没那么复杂,推荐使用bus来进行解决这类问题。

二、vue-bus如何使用?

第一步:使用npm install vue-bus --save

第二步:在main.js进行全局注册

第三步:在一个页面引用两个兄弟组件

第四步:使用emit进行参数传递

第五步:在created或mounted生命周期钩子,执行事件监听。最后记得将触发的事件销毁,不然会出现点击多次触发的情况。

三、bus总线机制/发布订阅者模式/观察者模式

比如有一个bus对象(中央事件总线),这个对象上有两个方法,一个是on(监听,也就是订阅),一个是emit(触发,也就是发布),就好比我们订阅报纸,到报社去付钱,才知道你要订阅的。

观察者模式是用来监听数据变化,改变视图层。

有什么解释的不好的,希望帮我指正,万分感谢。

对你有帮助的给个赞

原文链接: https://segmentfault.com/a/1190000013636153?utm_source=tag-newest

在vue1.0中,组件之间的通信主要通过vm.dispatch沿着父链向上传播和用vm.dispatch沿着父链向上传播和用vm.broadcast向下广播来实现。然而在vue2.0中,已经废除了这种用法。

vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择。

然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了.broadcast和.broadcast和dispatch的人来说,就需要一个比较便捷的解决方法。那么,eventBus的作用就体现出来了。

主要是现实途径是在要相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

这里来看一个简单的例子:

比如,我们这里有三个组件,main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件,而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现,click组件中触发点击事件后,由show组件将点击的是哪个dom元素console出来。

首先,我们给click组件添加点击事件

想要在doClick()方法中,实现对show组件的通信,我们需要新建一个js文件,来创建出我们的eventBus,我们把它命名为bus.js

importVuefrom'vue'exportdefaultnewVue()

这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。

importBusfrom'common/js/bus.js'

接下来,我们在doClick方法中,来触发一个事件:

methods: {    addCart(event){Bus.$emit('getTarget',event.target)      }  }

这里我们在click组件中每次点击,都会在bus中触发这个名为'getTarget'的事件,并将点击事件的event.target顺着事件传递出去。

接着,我们要在show组件中的created()钩子中调用bus监听这个事件,并接收参数:

created(){          Bus.$on('getTarget',target=>{console.log(target)          })  }

这样,在每次click组件的点击事件中,就会把event.target传递到show中,并console出来。

所以eventBus的使用还是非常便捷的,但是如果是中大型项目,通信比较复杂,还是建议大家直接使用vuex。

来看一个实际例子:

我们创建了一个selection.vue的下拉框组件,在layout.vue组件中使用了selection.vue组件,我们要实现点击layout.vue组件页面的任意一处(除下拉框组件本身外),都可以将下拉框收起来。首先,新建了一个eventBus.js文件,在里面新建了一个vue的实例赋值给const eventBus,在selection.vue和layout.vue中分别import eventBus from '../../eventBus'和import eventBus from '../eventBus',则eventBus对于selection.vue和layout.vue就是一个全局的vue实例对象,然后通过分别调用eventBus这个实例的事件触发emit和事件监听emit和事件监听on来实现通信和参数传递。图6,是为了在一个页面中,把selection.vue使用了至少两次,则我们点击任意一个selection.vue的同时,要把其它的selection.vue给收起来,如图7。

图1:

图2:

图3:

图4:

图5:

图6:

图7: