ponent('commemt-content',{
 template:'\
 div \
 h3 评论 /h3 \
 p v-if="comment.length==0" 暂无评论，我来发表第一篇评论！ /p \
 div v-else \
 div v-for="(item,index) in comment" v-bind:index="index" \
 b {{item.name}} span {{item.time}} /span /b \
 p @click="changeCommenter(item.name,index)" {{item.content}} /p \
 div v-if="item.reply.length 0" \
 div v-for="reply in item.reply" \
 b {{reply.responder}} nbsp; nbsp;回复 nbsp; nbsp;{{reply.reviewers}} span {{reply.time}} /span /b \
 p @click="changeCommenter(reply.responder,index)"" {{reply.content}} /p \
 /div \
 /div \
 /div \
 /div \
 /div ',
 pro凡科抠图: ['comment'],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
});

如果没有内容，则显示 “暂无评论，我来发表第一篇评论！”。如果有内容就开始遍历。因为点击评论要知道第几条，所以每条评论要绑一个v-bind:index="index"

到了二次评论那块，还是遍历reply数组，绑定该绑定的。因为就算点击内容，也是加到那条一级评论的最下面，所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已，后面那个index都是一级评论的index。

changeCommenter事件触发了change，父组件监听，执行相应行为。

父组件

ment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //评论人，这里会从session拿
 type: 0, //0为评论作者1为评论别人的评论
 oldComment: null, //久评论者的名字
 chosedIndex: -1, //被选中的评论的index
 article: {
 title: "当归泡水喝的九大功效",
 time: "",
 read:50,
 content: ""
 comment: [] //评论内容
 methods: {
 //添加评论
 addComment: function(data) {
 if(this.type == 0) {
 ment.push({
 name: 'session',
 time: getTime(),
 content: data,
 reply: []
 //服务器端
 }else if(this.type == 1){
 ment[this.chosedIndex].reply.push({
 responder: 'session',
 ment[this.chosedIndex].name,
 time: getTime(),
 content: data
 this.type = 0;
 //监听到了点击了别人的评论
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 //监听到了取消评论
 canelCommit: function() {
 this.type = 0;

data那里。。。实在是取名困难症啊。。。commenter是当前登录名，这里到时候会session里拿；type就是看到底是评论作者的还是评论别人的评论的；oldComment就是就评论者的名字（实际储存的时候应该是id）；chosedIndex是被点击的评论的index。

canelCommit是监听到取消评论事件，这里是为了如果了点击了别人的评论但是突然我就是想变评论作者用的。所以设type=0；

changCommmer是监听到点击了别人评论想回复评论的。即type=1.

addComment就是监听添加评论事件的。根据type的值，push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法，这里是根据type的不同分两个url传还是一个，取决于表的设计。待我明天好好设计表后，加入http请求，完成这个评论功能。

要期末了。真的怕挂科。

补充一下：

由于第一次自己设计数据库的表结构，所以很有问题。
更新一下，正确的表结构应该是每条评论都有自己的id，有一个parentId属性默认为null，如果是直接评论的话，parentId值为null，如果是回复别人的评论的话，parentId是那条评论的id。最后查出一条条数据后，再根据里面的是否有parentId等再组件这个obj，传到前端。如果直接组这个obj的话会for循环3次，所以。。。打算用一用数据结构里的散列，不用for循环这么多次。这周末搞定这个，下篇文章就是它了。

然而当我思考了下后。如果单单用散列的话，就不能根据时间来排序了。因为散列是根据id%length的值来插入的，所以没了时间排序。如果直接根据查数据库返回的数组组合这个obj的话，肯定是早插入的id靠前所以有时间顺序。这个数据结构的问题还真不简单啊。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。