* 如果有两个及以上的参数，我们可以通过对象的形式去传递。
*/
searchEvent.$emit("search",this.searchContent)
//多个参数传递的示例：
//searchEvent.$emit("search",{"content":this.searchContent,"valTwo":"valTow"})
}
},
props:{
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
在上面的示例我们主要做了以下事情： 1、导入EventBus
2、通过
@input="sendEvent" 去监听
onInput 事件，并发现输入框内内容有改变时，回调
sendEvent 方法，调用
EventBus.emit() 方法把数据消息发送出去第三步父组件(StateView)和子组件(SearchItem)接收数据消息
StateView.vue
<template>
<div>
<search-view></search-view>
<div>
<search-item :itemContent="content"/> //通过props去为子组件传递（动态数据：content）数据
<search-item itemContent="热门搜索2"/> //通过props去为子组件传递（固定数据：热门搜索2）数据
<search-item itemContent="热门搜索3"/>
</div>
<div>{{content}}</div> </div>
</template>
<script type="text/ecmascript-6">
import searchView from '../components/SearchInput.vue'
import searchItem from '../components/SearchItem.vue'
import searchEvent from '../event/SearchEvent' //导入EventBus
export default{
data () {
return {
content:"接收输入框的值"
}
},
mounted(){
/**
* 在mounted接受数据消息，$on接受两个参数。
* 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
* 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
*/
searchEvent.$on('search',(val)=>{
this.content=val;
//示例：如果数据传递的是对象形式
// this.content=val.content;
})
},
components: {
searchView,
searchItem
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
在上面的示例我们主要做了以下事情：
1、在父组件，我们通过SearchItem的
props 去传递了数据。2、通过在组件
mounted 生命周期中调用
EventBus.on() 方法去接收子组件（SearchInput）的数据消息，并对content进行修改值SearchItem.vue
