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

本来想用翡翠渲染这个页面，用vue渲染评论部分，但是想了想，觉得麻烦。最后，我用vue的整个组件来修复他。上线第一个演示：http://jsbin.com/ceqifo/1/edit? js，输出

再去效果图

可以直接评论，点击他人评论回复他人评论。

超文本标记语言

div id=' comment ' article-content v-bind : article=' article '/article-content commem t-content v-bind : comment=' comment ' v-: change=' changCommmer '/commenttmt-content comment-textarea v-bind : type=' type ' v-bind 3: name=' old comment ' v-3360 submit=' add comment ' v-: canel=' canelcommit '/comment-comment

文章内容是文章内容的一个组成部分，所以没什么好谈的，直接把数据绑定到子组件就可以了。这里我直接绑定一个obj，而不是绑定标题、时间等详细信息。由于直接绑定对象，子组件可以通过。这比单独写要好得多。

文章-内容组件-文本

然后，让我们从一个简单的注释开始——文本区域，文本框的组成部分。

Vue.com(' comment Textarea '，{ template : ' \ div class=' comment box ' \ H3评论/h3\ b v-if='type '您回复了{ { name } } \ Textarea name=' ' value='请填写评论内容' v-model=' comment text '/Textarea \ Button class=' BTN ' @单击=' addcomment '并发布/button\ Button class=' BTN' @单击=' canelcomment ' cancel/Button \/div '，prop :[' type '，'$emit('submit '，this.comment text)；this.commentText=}，canelComment:函数(){ this。$ emit(' canel ')；this.commentText=} }});Type表示如果点击了别人的评论，会显示“你回复xxx”的提示框。因为这两个组件是跨组件通信的，它们不是父子组件，而是兄弟组件，所以我把它们的通信挂在父组件的一个属性上来实现通信。

文本框中的内容由v型双向绑定。如果单击确定，将触发添加注释事件，并将文本内容传递给父组件，父组件将侦听该事件。

commem t-内容组件-评论内容

首先，确定json格式

评论： [{name: '毒同学黄'，//评论者姓名time:' 2016-08-17 '，content3360 '不错，说得很好，不错'，回复： [//回复评论信息是一个数组。如果没有内容，就是一个空数组{responder:' proud '，//reviewer : '毒同学黄'，//reviewer time :' 2016-09-05 '，content : '你说得对' }}]然后看commemt-content组件

vue.com没有评论(' commemt-content '，{ template 3360 ' \ div class=' comment box ' \ H3 comment/H3 \ p v-if=' comment . length==0 '，我来做第一个评论！/p \ div v-else \ div class=' comment ' v-for='(项，索引)在comment ' v-bind : index=' index ' \ { { item . name } } span { { item . time } }/span \ p @ click=' change comment er(项. name，索引)' { { item . content } }/p \ div v-if=' item . reply . length 0 ' \ div class=' reply ' v-for=' reply in item . reply ' \ { { reply . responder } } reply }/div\ /div\ /div '，props: ['comment']，methods : { changecommenter :函数(名称，索引){ this。$emit('change '、name、index)；} }});如果没有内容，“无可奉告，让我来做第一个评论！”。如果有内容，开始遍历。因为您需要通过单击注释来知道注释的数量，所以每个注释都应该与一个v-bind:index='index '相关联

当到达第二个注释块时，遍历回复数组并绑定绑定的数组。因为即使内容被点击，它也会被添加到第一级注释的底部，所以我将同一个事件绑定到两个点击事件。只是进来的名字不一样，后面的索引是一流评论的索引。

变更注释器事件触发变更，父组件监听并执行相应的行为。

父组件

var comment=new vue({ El : ' # comment '，data : { comment er 3360 ' session '，//评论员，这里您将从session中获得type: 0。//0为作者评论1、他人评论，oldComment: null，//长期评论者姓名chosedende x :-1，//所选评论的索引文章{ title : '当归泡水九功'，time: '2016-07-12 '，Read :50，content :''}，评论：[]//评论内容}，Methods:type==0) {this。声明。push ({name :' session '，time : gettime()，content : data，reply :[]})；//服务器端} else if (this。type==1) {this。声明[这。选择的索引]。回复。推送({响应者： '会话'，审阅者：此。声明[这。选择的索引]。名称，时间： gettime()，this . type=0；}}，//我听到别人评论changcommmer :函数(名称、索引){这个。oldcomment=namethis.chosedIndex=indexthis . type=1；}，//听到取消注释canelcommit : function(){ this。type=0；} }})数据。真的很难说出名字。Commenter是当前的登录名，当时间到来时，将在会话中使用；类型是看是评论作者还是评论别人的评论；OldComment是评论员的名字(应该是id)；当它被实际存储时)；ChosedIndex是被单击的注释的索引。

CanelCommit正在监听取消评论的事件。在这里，如果我点击了别人的评论，突然就想换个评论的作者。因此，让type=0；

ChangCommmer听了别人的评论，想回复他们。即type=1。

AddComment是收听添加评论事件。根据type的值，推送对应的数组。请记住在这里连接数据库。传输数据的方式有两种，根据类型不同是两个URL传输还是一个URL传输，取决于表的设计。明天设计好表单后，我会加入http请求，完成这个评论功能。

学期结束了。真的害怕失败。

补充：因为是第一次设计数据库的表结构，所以很有问题。要更新，正确的表结构应该是每个注释都有自己的id，默认情况下，一个parentId属性为null。如果是直接评论，parentId值为null，如果是对其他人评论的回复，parentId就是该评论的Id。最后，在找出每一条数据后，根据其中是否有parentId对obj进行重组，然后传输到前端。如果你直接把这个obj分组，它会循环3次，所以。我将在数据结构中使用哈希，而不是循环这么多次。这个周末完成这件事，下一篇文章就是它了。

但是，当我想起来的时候。如果只使用哈希，就不能按时间排序。因为哈希是根据id%length的值插入的，所以没有时间排序。如果根据搜索数据库返回的数组直接组合这个obj，那一定是前面插入的id，所以有一个时间顺序。这种数据结构的问题并不简单。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。