v-demo1 add.vue

<template>


<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group">
<label>用户名</label>
<input type="text" class="form-control" placeholder="用户名" v-model="name"/>
</div>
<div class="form-group">
<label>评论内容</label>
<textarea class="form-control" placeholder="评论内容" rows="6"v-model="content"/>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<button type="button" class="btn btn-default" @click="add">提交</button>
</div>
</div>
</form>

</div>
</template>

<script>
export default{
props:{
// 指定属性名|属性值类型|必要性
addComment:{
type:Function,
required:true
}
},
data(){
return {
name:'',
content:''
}
},
methods:{

add(){
// 1.检查输入的合法性
const name = this.name.trim()
const content=this.content.trim()
if(!name||!content){
alert('姓名或内容不能为空')
return
}
// 2.根据输入数据。封装成comment对象
const comment={
name,
content
}

// 3.增添到comments
this.addComment(comment)
// 4.清除输入
this.name=''
this.content=''
}
}
}
</script>

<style>
</style>