VueEventBus自定义组件事件传递-创新互联

前言

组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式：EventBus和利用Vuex框架进行状态管理。

我会通过两种不同的交互方式，它们对于父子组件间数据交互和兄弟组件间数据交互。

由于篇幅关系，本文主要介绍EventBus进行数据消息传递；关于运用Vuex框架进行状态管理在下一篇文章中介绍。

案例介绍

本章节会有大量的代码示例，为了让读者阅读轻松，做如下目录和组件介绍。本章节主要运用了两个子组件和一个父组件。

子组件文件名：SearchInput.vue 和 SearchItem.vue

父组件文件名：StateView.vue

目录结构展示：

1、SearchInput.vue

组件介绍：一个输入框，它会onInput方法去监听输入内容，并调用方法，将输入框内的数据传递出去。

代码展示：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。