前言
组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式：EventBus和利用Vuex框架进行状态管理。
我会通过两种不同的交互方式，它们对于父子组件间数据交互和兄弟组件间数据交互。
由于篇幅关系，本文主要介绍EventBus进行数据消息传递；关于运用Vuex框架进行状态管理在下一篇文章中介绍。
案例介绍
本章节会有大量的代码示例，为了让读者阅读轻松，做如下目录和组件介绍。本章节主要运用了两个子组件和一个父组件。
子组件文件名：SearchInput.vue 和 SearchItem.vue
父组件文件名：StateView.vue
目录结构展示：
1、SearchInput.vue
组件介绍：一个输入框，它会onInput方法去监听输入内容，并调用方法，将输入框内的数据传递出去。
代码展示：
<template>
<div>
<input placeholder="搜索内容" v-model="searchContent"/>
</div>
</template><script type="text/ecmascript-6">
export default{
data(){
return{
searchContent:""
}
},
props:{
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
SearchItem.vue
组件介绍：一个span，它主要用来接收父组件传递的内容和接收同胞组件输入框传递的内容，并进行展示。
代码示例：
<template>
<span class="item">
{{content}}
</span>
</template><script type="text/ecmascript-6">
export default{
data(){
return{
content:this.itemContent
}
},
props:{
itemContent:{
type:String,
required:true
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.item
background #f4f4f4
padding 3px 5px
box-sizing border-box
display inline-block
cursor pointer
</style>
StateView.vue
组件介绍：父组件，主要展示页面和加载子组件
代码示例：
<template>
<div>
<search-view></search-view>
<div>
<search-item :itemContent="content"/>
<search-item itemContent="热门搜索2"/>
<search-item itemContent="热门搜索3"/>
