<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"> </style>
在上面的示例我们主要做了以下事情：
1、在父组件，我们通过SearchItem的 props 去传递了数据。
2、通过在组件 mounted 生命周期中调用 EventBus.on() 方法去接收子组件（SearchInput）的数据消息，并对content进行修改值
SearchItem.vue
<template> <span> {{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"> .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、数据消息一旦发送，所有注册了接收该数据消息的地方都会接收到该数据消息。