非父子穿值

<div id='app'>
       <child></child>
   <son></son>
   </div>
<script src='vue.js'></script>
<script>
 var bus=new Vue() 

 Vue.component('child',{
   template:`
      <div>
         <h1>这是组件A</h1>
         <button @click='sendMsg'>点击按钮传值</button>
      </div>
   `,
   data:function(){
       return{
           msg:'非父子组件传值'
       }
   },
   methods:{
       sendMsg:function(){
          bus.$emit('send',this.msg)
       }
   }
 }) 

Vue.component('son',{
    template:`
     <div>
         <h1>这是组件B</h1>
         <a href="#">{{mess}}</a>
      </div>
  `,
  data:function(){
      return{
          mess:''
      }
  },
//  生命周期
  mounted:function(){
     bus.$on('send',msg=>{
         console.log(this);
         this.mess=msg;
     }) 
  }
  
})  


new Vue({
  el:'#app'
})
</script>