</div>
<div>{{content}}</div>
</div>
</template>
<script type="text/ecmascript-6">
import searchView from '../components/SearchInput.vue'
import searchItem from '../components/SearchItem.vue'
export default{
data () {
return {
content:"接收输入框的值"
}
},
components: {
searchView,
searchItem
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
正文
EventBus
1、父组件发送数据给子组件，可以通过子组件定义的
props 自定义属性，去传递数据2、EventBus其实就是通过实例化一个Vue实例，然后通过该实例的
$emit 方法发送数据消息和
$on 方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。我们看下一个下面案例主要展示了：
1、通过
props 父组件(StateView)去为子组件（SearchItem）传递数据；2、子组件(SearchInput)通过
EventBus 和父组件(StateView)、兄弟组件(SearchItem)传递数据；目录结构展示
效果展示
代码展示：（粗体表示变化部分）
1、第一步：自定义一个EventBus（SearchEvent.js）
import Vue from 'Vue'
export default new Vue()在这里我们
new 了一个Vue的实例，并将它输出。第二步：子组件通过EventBus发送数据消息
<template>
<div>
<input placeholder="搜索内容" @input="sendEvent" v-model="searchContent"/> //增加了@input=“sendEvent”，去监听onInput事件，并回调sendEvent方法
</div>
</template><script type="text/ecmascript-6">
import searchEvent from '../event/SearchEvent' //导入EventBus
export default{
data(){
return{
searchContent:""
}
},
methods:{
sendEvent:function(){ //定义sendEvent方法，在input中监听onInput，并回调该方法
/**
* 通过导入的searchEvent调用$emit方法去发送数据消息。
* 第一个参数为事件名，到时候我们要通过该事件名去接收数
* 第二个参数为数据值，如果只有一个参数，我们可以直接传递该参数
