<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<comment-box v-on:func="add"></comment-box>
<ul class="list-group">
<li class="list-group-item" v-for="(item,id) in list" :key="item.id">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="tmp1">
<div>
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
</div>
</div>
</template>
<script>
var commentBox={
data(){
return{
user:'',
content:''
}
},
template:'#tmp1',
methods:{
postComment(data1,data2){
this.$emit("func",this.user,this.content);
console.log(this.user,this.content);
this.user="";
this.content="";
}
}
};
var vm=new Vue({
el:"#app",
data:{
list:[
{id:Date.now(),user:'李白1',content:'天生我材必有用'},
// {id:Date.now(),user:'李白2',content:'劝君更尽一杯酒'},
// {id:Date.now(),user:'李白3',content:'千金散去还复来'},
]
},
components:{
commentBox:commentBox
},
methods:{
add(data1,data2){
console.log("我是父组件的方法"+data1+data2);
this.list.push({id:Date.now(),user:data1,content:data2},);
}
}
})
</script>
</body>
</html>
