2018-09-25 子传父（聊天）

1.

<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='rcMsg' userName='jack'></user>
                <user @send='rcMsg' userName='rose'></user>
             </div>
           `,
           data:function(){
               return{
                   arr:[]
               }
           },
           methods:{
               rcMsg: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);  //发送数据
                   this.inputVal=""
               }
           }
       })

        
       new Vue({
           el:'#app'
       })
    </script>

如图所示