vue父组件同信

1.添加效果

HTML部分

<div id='app'>
        <chat></chat>
</div>

JS部分

<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>

效果图：

image.png