非父子传值

箭头函数：箭头函数就是没有function关键字，而是一个类似箭头的函数：

var a = ()=>{
  return 1;
}

相当于：

function a(){
  return 1;
}

mounted

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick替换掉 mounted

第三方量：var bus =new vue（）

1.点击弹出效果

HTML部分

 <div id='app'>
       <child></child>
       <son></son>
 </div>

JS部分

 <script>
       var bus=new Vue();
       Vue.component('child',{//A
           template: `
            <div>
               <h1>我是child组件</h1>
               <button @click='sendMsg'>发送数据给son</button>
            </div>
           `,
            data: function() {
                return {
                    msg:'hello vue'
               }
           },
           methods:{
               sendMsg:function(){
                  bus.$emit('send',this.msg) 
               }
           }
       }) 
        
       Vue.component('son',{//B
           template:`
            <div>
               <h1>我是son组件</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>

效果图：

image.png