<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; 
 });