组件间传值案例 两人对话

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>