vue父子组件通信

1.非父子之间传值

非父子之间传值用第三方

   <div id='app'>
       <chat></chat>
   </div>
    <script src="vue/dist/vue.js"></script>
    <script>
    Vue.component('chat',{
        template:`
           <div>
              <ul>
                 <li v-for="value in arr">{{value}}</li>
              </ul> 
              <user @send='rcvMsg' userName='jack'></user>
              <user @send='rcvMsg' userName='rose'></user>
           </div>
       `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.arr.push(txt)
            }
        }
    })  
    
    Vue.component('user',{
        props:['userName'],
        template:`
          <div>
             <label>{{userName}}</label>
             <input type='text' v-model='inputVal'>
             <button @click='sendMsg'>发送</button>
          </div>
        `,
        data:function(){
            return{
                inputVal:''
            }
        },
        methods:{
          sendMsg:function(){
              this.$emit('send',this.userName+':'+this.inputVal)
          }
        }
    }) 
    new Vue({
        el:'#app'
    })
    </script>

2.生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

生命周期的八个过程：

1.beforeCreate（创建前）
2.created（创建后）
3.beforeMount(载入前）
4.mounted（载入后）
5.beforeUpdate（更新前）
6.updated（更新后）
7.beforeDestroy（销毁前）
8.destroyed（销毁后）

<div id='app'>{{msg}}</div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>