Vue 非父子组件之间的通信

<div id="app"></div>
        
        
    <script>
        // 创建一个空的vue对象作为bus*事件总线
        vue.prototype.$bus=new vue();
        
        vue.component('myheader',{
            template:`
                <div>
                    <p>this is the header area</p>
                    <button @click="send">向body传递数据</button>  <!--调用的函数可以带参数-->
                </div>
            `,
            methods:{
                send(){ //可带参数
                    this.$bus.$emit("received","hello")  //触发一个自定义事件，该事件可以携带0、1、多个数据。事件、数据都放在bus总线中
                }
            }
            
        })
    
    
        vue.component('mybody',{
            template:`
                <div>
                    <p>this is the body area</p>
                    <p>来自header的数据：{{msg}}</p>  <!-- 展示接收到的数据 --->
                </div>        
            `,
            data(){
                return{
                    msg:''
                }
            },
            created(){  //在created(){}中写监听
                //写法一
                //var self=this;  //直接用this没效果，需要把this赋给一个临时变量，使用临时变量代替this
                //在bus总线中注册一个事件监听，当指定的事件发生时会调用对应的函数
                //self.$bus.$on('received',function(val){  //此处使用匿名函数
                //    self.msg=val; 
                //});
                
                //写法二
                this.$bus.$on('received',val=>{  //使用es6的箭头函数，这种方式可以直接使用this。更简洁，推荐。
                    this.msg=val;
                })
            }
        })
        
            
        new vue({
            el:'#app',
            template:`
                <div>
                    <my-header></my-header>
                    <my-body></my-body>
                </div>
            `,
        });
        
    </script>

this.$bus.$on('received',function(val){  
     this.msg=val; 
 });