效果图：

QQ截图20180922100902.png

QQ截图20180922100942.png

body:

<div id="app">
   <my-father></my-father>
</div>

js:

<script>
    Vue.component('my-father',{
        template:
        `       <div>
                    <ul>
                        <li v-for='(value,index) in arrs'>{{value}}</li>
                    </ul>
                    <my-child @send='sent' userName='jack'></my-child>
                    <my-child @send='sent' userName='rosc'></my-child>
                </div>
        `,
        data:function(){
            return{
                arrs:[]
            }
        },
        methods:{
            sent:function(text){
                this.arrs.push(text)
            }
        }
    })
    
    Vue.component('my-child',{
        props:['userName'],
        template:
        `
            <div>
                <span>{{userName}}</span>
                <input type='text' v-model='mess'><button @click='add'>添加</button>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            add:function(){
                this.$emit('send',this.userName+':'+this.mess)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>