简单了解 公交事件总线实现的原理(bus)

公交事件总线:指的是一个空的Vue实例,bus=new Vue({}),用于组件之间的 简单通信.

过程:1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量
2.通过这个对象调用.$emit('消息名','值')发布消息
3.使用.$on('消息名',处理函数) 用来监听
4. .$off('消息名') 销毁

实例:

  <div id="box">
        <laoduan></laoduan>
        <jiaxin v-if='flag'></jiaxin>
        <button @click='flag = !flag'>取消</button>
  </div>
  <script>
        //第一步 先创建一个空vue实例
        var bus = new Vue()  //平台:微信
        var laoduanT=`
        <div>
            <input type="text" v-model='mess'>
            <button @click='send'>发布小电影</button>
        </div>
       `
       //作者:
        Vue.component('laoduan',{
            template:laoduanT,
            data(){
                return{
                    mess:""
                }
            },
            methods:{
                send(){
                    //第二步 发送信息
                    //.$emit('名字','内容')
                    bus.$emit('swahz',this.mess)
                }
            }

        })
        var jiaxinT=`
 
        `
        //订阅者
        Vue.component('jiaxin',{
            template:jiaxinT,
            created(){
                //第三步 关注
                //.$on('名字',处理函数建议使用箭头函数)
                bus.$on('swahz',(mess)=>{ 
                    this.mess = mess
                    console.log(mess)
                })
            },
            data(){
                return{
                    mess:""
                }
            },
            destroyed(){
                //第四步 取消关注
                bus.$off('swahz')
            }
            
        })
        var VM = new Vue({
            el:"#box",
            data:{
                flag:true
            }
        })
  </script>   

总结:本文主要通过简单的实例学习了Vue中有关于 EventBus 相关的知识点。主要涉及了 EventBus 如何实例化，又是如何通过 $emit 发送频道信号，又是如何通过 $on 来接收频道信号.