2018-09-25

子传父

    <div id="app">
        <chat></chat>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        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>
                  <input  type="text" v-model="redu">
                  <button @click='sendMsg'>发送</button>
               </div>
            `,
            data:function(){
                return{
                    redu:''                                       
                }
            },
            methods:{
                sendMsg:function(){
                    this.$emit('send',this.userName+":"+this.redu)
                }
            }
        })
        new Vue({
            el:'#app'
        })
    </script>