Vue.js实现文章评论和回复评论功能
178 浏览量
2020-10-19
23:16:45
上传
评论 1
收藏 71KB PDF 举报
Vue.js实现文章评论和回复评论功能实现文章评论和回复评论功能
主要为大家详细介绍了Vue.js实现文章评论和回复评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考
一下
本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。
先上在线demo：http://jsbin.com/ceqifo/1/edit?js,output
再上效果图
可直接评论，点击别人的评论能回复别人的评论。
html
<div id="comment">
<article-content v-bind:article="article"></article-content>
<commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
<comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"></comment-textarea>
</div>
数据全都由根组件绑定下去的。这里还监听了几个事件。
<article-content是文章内容的组件，没啥好讲的，直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标
题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象，子组件可以用.的方式很好的调用，比分开写好多了。
<article-content组件组件–文本文本
然后先说个简单点的，<comment-textarea>，文本框的那个组件。
Vue.component('commentTextarea',{
template:'\
<div class="commentBox">\
<h3>发表评论</h3>\
<b v-if="type">你回复 {{name}}\
<textarea name="" value="请填写评论内容" v-model="commentText"></textarea>\
<button class="btn" @click="addComment">发表</button>\
<button class="btn" @click="canelComment">取消</button>\
</div>',
props: ['type','name'],
data: function(){
return {commentText:""}
},
methods: {
addComment: function() {
this.$emit("submit",this.commentText);
this.commentText = "";
},
canelComment: function() {
this.$emit("canel");
this.commentText = "";
}
}
});
type是如果点击了别人的评论，会显示 ”你回复xxx “ 的提示框，这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组
件，我把他们的通信挂在了父组件的一个属性上，实现通信。
文本框内的内容用一个v-model双向绑定，如果点击了确定，就触发一个 addComment事件并把文本内容传给父组件，父组件
会监听事件。
commemt-content组件组件–评论内容评论内容
先来确定json格式
comment: [
{
name: "有毒的黄同学", //评论人名字
time: "2016-08-17",
content: "好,讲得非常好，good",
reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组
{
responder: "傲娇的", //评论者
reviewers: "有毒的黄同学", //被评论者
time: "2016-09-05",
content: "你说得对"
评论0
最新资源