vue中父子组件通信是比较常见的,今天看看一个页面中的如何用eventbuts解决两个兄弟组件是如何通信的。

eventbus

eventbus称为事件总线,虽然听着挺高大上的,但它的本质就是一个vue的实例,let eventbus=new Vue(),利用vue中的$on定义事件,$emit触发事件,然后需要的组件可引用这个eventbus,从而达到跨组件沟通的目的。下面看看如何配置一个简单的eventbus:

首先我们要定义一个js文件,如eventbus.js,用来导出这个vue的实例:

然后我们在child1组件中引用eventbus.js并用$on去定义一些方法:

注意,当前页面绑定的方法,一定要在beforeDestroy去解绑,因为vue是不会去处理那些你自定义的事件的,如果不解绑,某些情况就会导致多次触发问题。

现在我们在child组件中去触发那些事件:

上面的child组件和child1组件都是在同一个页面中使用的:

全局eventbus

上面那种方式是单独写一个文件,需要的地方去引用eventbus.js,还有一种更为方便的做法,就是绑定在全局Vue上:

这个可以写在一个肯定会调用的页面上,例如main.js。

其他的使用和上面差不多,就是引用eventbus的方式不一样,之前是先导入eventbut.js为EventBus,然后用EventBus.$on或者EventBus.$emit,现在用this.$bus.$on和this.$bus.$emit,因为$bus现在绑定在了Vue上,内部可以直接引用。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字