09-生命周期及非父子组件间的通信

一. Vue生命周期

lifecycle.png

二、生命周期代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
       {{msg}}
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
                alert('beforeCreate')
           },
           created:function(){
                 alert('Created')
           },
           beforeMount:function(){
               alert('beforeMount')
           },
           mounted:function(){
               alert('Mounted')
           }
       })
    
    </script>
</body>
</html>

三、非父子组件通信

vue中非父子组件通信需要借助一个空的vue实例，案例如下:

<!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实例
        Vue.component('child',{
            template:`
                <div>
                   <h1>这是child组件</h1>
                   <button @click='sendToChild'>按钮</button>
                </div>
            `,
            data:function(){
                return{
                    msg:'非父子组件通信'
                }
            },
            methods:{
               sendToChild:function(){
                   bus.$emit('send',this.msg)//使用空的vue实例去发送一个事件
               } 
            }
        })
        
          Vue.component('son',{
            template:`
                <div>
                   <h1>这是son组件</h1>
                   <a>{{mess}}</a>
                </div>
            `,
              data:function(){
                  return{
                      mess:''
                  }
              },
              mounted:function(){
                  bus.$on('send',txt=>{//使用空的vue实例去接收一个事件
                      this.mess=txt
                      console.log(this);
                  })
              }
        })
       new Vue({
           el:'#app'
       })
    </script>
</body>
</html>