2018-09-23 生命周期和非父组件之间的通信

1.生命周期的例子

 new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreate')
           },
           created:function(){
               alert('Created')
           },
           beforeMount:function(){
               alert('befroeMounted')
           },
           mounted:function(){
               alert('mounted')
           }

       })

2.非父组件间的通信

先声明一个中间值,通过中间量传递
var bus= new Vue
发送方用 $emit（）接收方用$on（）

<div id='app'>

       <child></child>
       <son></son>

   </div>

    <script src='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>

传递完之后的效果图

1.png