美文网首页Vue
09-生命周期及非父子组件间的通信

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

作者: 乔乔_老师 | 来源:发表于2018-10-26 10:56 被阅读0次
    一. 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>
    

    相关文章

      网友评论

        本文标题:09-生命周期及非父子组件间的通信

        本文链接:https://www.haomeiwen.com/subject/sxyctqtx.html