skyADMIN

Vue 组件间通信之event Bus

组件化的思路是把网页拆成一个个组件,以便开发、维护、复用。现在前端主流的三大框架的都是在组件化方面做得很好。我在用Vue框架的时候,遇到了一个问题,就是vue的组件间通信。

我说的组件间通信不是父子组件通信,而是兄弟组件。

官方文档里 组件 一节有讲如何使用props和自定义事件来进行组件间通信,props主要是父组件把数据单向传递给子组件,虽然可以变成双向,但是双向数据流是目前不提倡的,认为会使程序变得难以理解。自定义事件有四个,2.0里废了两个。

被废掉的两个是boardcast和patch,分别是父组件向子组件们广播事件和子组件向父组件派发事件,在vue 1.0版本中,我就是通过这两个API完成了兄弟组件间的通信,但是我认为这种方式,简直是一坨屎。

虽然现在还是用着1.0版本的,但是又新遇上了一个问题,比如,A组件是父组件,B和C都是A组件的子组件,B和C是兄弟组件,如果B和C想通信,可以用刚刚那种屎一样的方式,但是现在难度升级了,现在有了一个D组件,D组件是通过slot挂载在B组件里的,现在D要和C通信……Orz,这已经不是一坨屎能形容的了。

OK,那我必须要找一种新的组件间通信方式了。查询多方资料后,主要有两种方式:event bus 和 vuex。

vuex是状态管理,就像是react框架的redux。基本也看了一下,感觉挺好,不过我认为应该是大型项目,SPA,有复杂的交互和状态的应用需要使用的。

我手头目前的项目,并不是SPA,我认为它的逻辑顶天也不过那么多,甚至有的组件复用都有种徒增烦恼的感觉。所以权衡之后我考虑还是用event bus来解决这个问题比较合适。

官方文档的话,看这个链接吧:http://vuejs.org/guide/migration.html#Events

好像官方改叫它eventhub了……都一样,就是为了解决跨组件通信。

以我来看,它好像是重新开了个vue实例,然后事件都弄在那个实例上,所以都可以自由监听,自由触发,相当于给事件开个一个专门的作用域,所以也不会污染全局。不过也有人说只有一个vue实例,这个eventbus是通过注入的方式……我不是很懂……

具体怎么用可以参考这里:http://www.w3ctrain.com/2016/08/02/text-overflow-mutiple-line/

简单概括下就是,建一个bus.js文件,里面只有一行代码export default new Vue();//记得引入Vue……

然后在其他组件里import这个bus,在这个Bus里去触发事件、监听事件。

下次做复杂应用再看看vuex,不过我感觉那个文档比较多比较齐全,而且也不难理解,可能没啥坑。

码字很辛苦,转载请注明来自环宇博客《Vue 组件间通信之event Bus》

评论