效果图：
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>
