非父子间的传值也可以理解为同级之间的传值

在非父子传值中主要声明了一个:
var 变量 = new Vue();
指向Vue实例的变量.

其次

使用  $emit("发送的数据名",数据内容)  来发送数据
使用  $on("接收的数据名",使用箭头函数指向本组件的数据)

案例

   <div id='app'>
       <child></child>
       <son></son>
   </div>
    <script src='js/vue.js'></script>
    <script>
      var bus=new Vue();  //声明的变量
        
      Vue.component('child',{//a
          template:`
             <div>
                <h2>我是child组件</h2>
                <button @click='sendMsg'>发送数据</button>
             </div>
         `,
          data:function(){ 
              return{
                  msg:'我是child组件中的数据，要传给son组件'
              }
          },
          methods:{
              sendMsg:function(){//发送数据
                 bus.$emit('send',this.msg)  
              }
          }
      })
      
      Vue.component('son',{//b
          template:`
           <div>
                <h2>我是son组件</h2>
                <a>{{mess}}</a>
           </div>
         `,
          data:function(){
             return{
                 mess:''
             }
          },
          mounted:function(){
            bus.$on('send',msg=>{//接收数据，使用箭头函数指向这个组件本身的数据
                console.log(this);
                this.mess=msg
            })  
              
          }
          
          
      })
        
        
      new Vue({
          el:'#app'
      })
    </script>

QQ截图20180923200808.png