v-demo1 app.vue

<template>
<div>
<header class="site-header jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>请发表对Vue的评论</h1>
</div>
</div>
</div>
</header>
<div class="container">
<Add :addComment="addComment"></Add>
<List :comments="comments" :deleteComment="deleteComment"></List>
</div>
</div>
</template>

<script>

import Add from './components/Add.vue'
import List from './components/List.vue'
export default {
data(){
return{
// 数据在那个组件，更新数据的行为（方法）就在那个里
comments:[
{name:'1',content:'一'},
{name:'2',content:'er'},
{name:'3',content:'san'},
{name:'4',content:'si'},
]
}
},
methods:{
// 添加评论
addComment(comment){
// 添加在前面
this.comments.unshift(comment)
},
// 删除指定下标评论
deleteComment(index){
this.comments.splice(index,1)
}
},

components:{
Add,
List
}
}
</script>

<style>

</style>