Vue.js实现文章评论和回复评论功能

本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。 先上在线demo：nofollow" href="http://jsbin.com/ceqifo/1/edit?js,output">http://jsbin.com/ceqifo/1/edit?js,output

再上效果图

可直接评论，点击别人的评论能回复别人的评论。

html

rush:xhtml;">

数据全都由根组件绑定下去的。这里还监听了几个事件。

文章内容的组件，没啥好讲的，直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象，子组件可以用.的方式很好的调用，比分开写好多了。

然后先说个简单点的，，文本框的那个组件。

rush:js;"> Vue.component('commentTextarea',{ template:'\

Box">\

发表评论

\ 回复{{name}}\ 评论</a><a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>" v-model="commentText">\ \ \

',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格式

rush:js;"> comment: [ { name: "有毒的黄同学",//评论人名字 time: "2016-08-17",content: "好,讲得非常好，good",reply: [ //回复评论的信息，是一个数组，如果没内容就是一个空数组 { responder: "傲娇的",//评论者 reviewers: "有毒的黄同学",//被评论者 time: "2016-09-05",content: "你说得对" } } ]

再来看commemt-content组件

rush:js;"> Vue.component('commemt-content',{ template:'\

Box">\

评论

\

评论，我来发表第一篇评论！

\

\

\ {{item.name}}{{item.time}}\

\

{{reply.responder}}回复{{reply.reviewers}}{{reply.time}}\

\

\

\

\

\

',props: ['comment'],methods: { changeCommenter: function(name,index) { this.$emit("change",name,index); } } });