第二十六篇组件通信 - 事件中心bus - 码农知识堂

第二十六篇组件通信 - 事件中心bus
在上一篇内容当中讲到了关于组件与组件之间的通信，组件与组件之间不能进行直接的来进行通信，需要通过一个"中间人"来进行传递，但在上一篇内容末尾提及到了这样也有一定的缺陷，如果当多个组件需要进行通信，那么这样一来组件与组件的通信变得复杂貌似像一场灾难，那么这篇内容讲述如何拯救这场灾难！

前面讲组件通信是通过的是中间人的方式，如下图：

那么事件中心是怎样的呢？其实就像公众号一样，发布者将东西发布上去供别人观看使用，而订阅者将东西订阅下来每次有发布就能收到消息；

这样一来对于事件中心就有了一个基本印象，bus中央事件总线不是组件内部的，而是组件外部的，组件与组件通信，通过bus.$emit 触发（发布上去），bus.$on监听（订阅下来），下面通过代码操作来看一下具体是怎样的流程内容；

事件中心 - bus
```
<div id="app">
    <publisher>publisher>
    <subscriber>subscriber>
div>
<script>
    // 事件中心 - 中央事件总线 (bus)
    // 空的Vue实例;bus.$emit触发;bus.$on监听
    var bus = new Vue()
 
    // 组件 - 发布者
    Vue.component("publisher",{
        template:`
            
                组件 - 发布者
                
    
            
```
`,
data(){
return{
publisher:'auther:我发布了新的作品!快来看看吧...'
}
},
methods:{
handleSend(){
bus.$emit("myauther",this.publisher);
}
}
})
// 组件 - 订阅者
Vue.component("subscriber",{
template:`
组件 - 订阅者
订阅消息:
{{info}}

data(){

return{

info:"暂无订阅消息"

}

},

//

mounted(){

            bus.$on("myauther",(item)=>{

this.info = item

})

}

})

new Vue({

el:'#app'

})

script>

效果：

以上就是通过事件中心来实现组件与组件之间的一个通信，这种方式与之前讲到的通过中间人的方式势必要简便好用些；

mounted：

mounted是生命周期之一，上面的代码中使用mounted是为了能够在订阅者当中自动的执行函数，等DOM创建后去触发；具体可以看 API — Vue.js 的mounted内容；后续如有的话会进行讲讲生命周期；

综合案例

下面可以来进行上一次用组件与组件通信完成的案例试试，如果有看过上一篇内容的可以做一下对比，感兴趣的可以看一下（附上地址：第二十五篇组件通信 - 间接）；

所要完成的效果：

在这个案例当中也一样，同样使用之前的内容，这里点击axios请求数据传到组件当中依然不变，主要是修改组件与组件直接的信息传递；（去掉css样式让你看起来不会比较晃眼！）


"app">
    <button @click="sendRequest"> axios请求 button>
 
    <film :myhot="hot">film>
    <detail>detail>

<script>

var bus = new Vue()

Vue.component("film",{

props:['myhot'],

template:`

<div>

                <p>热门电影p>

                <div v-if="myhot.length===0">

                    <p>请先发送axios请求...p>

div>

                <div v-else v-for="item in myhot" :key="item.id">

                    <img :src="item.img" alt="">

<div>

                        影片:《{{item.nm}}》span>

                        <span>{{item.desc}}span>

                        <button @click="getDetail(item)">点击详情button>

div>

data(){

return{

info:''

}

},

methods:{

getDetail(item){

this.info = item.videoName

bus.$emit("filmDetail",this.info);

}

})

Vue.component("detail",{

template:`

<div>

                <p>简介：p>

                <p>   {{filmDetail}}p>

div>

data(){

return{

filmDetail:'热门电影预告通知!'

}

},

mounted(){

bus.$on("filmDetail",(item)=>{

this.filmDetail = item

})

}

})

new Vue({

el:'#app',

data:{

hot:[],

},

methods:{

sendRequest(){

axios.get('axios.json')

.then(res=>{

console.log(res.data)

this.hot = res.data

})

}

})

script>

效果如下：

以上就是本篇的全部内容，解决了组件与组件之间的通信问题以及结合运用之前的所讲学的内容做的综合案例进行了一个修改！希望通过此篇能够加强你对组件通信的了解和认识，感谢大家的支持！

第二十六篇 组件通信 - 事件中心bus

事件中心 - bus

mounted：

综合案例

第二十六篇组件通信 - 事件中心bus