子传父
<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>
