Vue EventBus自定义组件事件传递

<template>
 <span class="item">
  {{content}}
 </span>
</template>
<script type="text/ecmascript-6">
 import searchEvent from '../event/SearchEvent' //导入EventBus
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
  searchEvent.$on('search',(val)=>{
  this.content=val;
  })
 }
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .item
 background #f4f4f4
 padding 3px 5px
 box-sizing border-box
 display inline-block
 cursor pointer
</style>

在上面的示例我们主要做了一事情：

通过在组件

mounted

生命周期中调用

EventBus.on()

方法去接收子组件（SearchInput）的数据消息，并对content进行修改值。

我们可以感受到 SearchInput一发送数据消息，所有注册接收

search

事件的地方都会接收到数据消息

复盘：

1、父组件给子组件进行数据传递可以通过

props

进行传递。

2、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递可以通过EventBus去实例化一个Vue，并通过该实例的

$emit

和

$on

方法去传递和接收数据消息。

3、数据消息一旦发送，所有注册了接收该数据消息的地方都会接收到该数据消息。