非父子传值 :非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $$emit 获取 $on 的数据参数，实现组件通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <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>
               <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>
</body>
</html>

生命周期 ：

  beforeCreate    beforeCreate 创建前状态
  created         created 创建完毕状态
  beforeMount     beforeMount 挂载前状态
  mounted         mounted 挂载结束状态
  beforeUpdate    beforeUpdate 更新前状态
  updated         updated 更新完成状态
  beforeDestroy   beforeDestroy 销毁前状态
  destroyed       destroyed 销毁完成状态

生命周期.png

生命周期1.png