父子组件通信

<div id="app">
            <chat></chat>
        </div>
        <script src="js/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>

生命周期：

 <div id='app'>{{msg}}</div> 
<script src='[js/vue.js](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>