<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>

Vue.component('commentTextarea',{
 template:'\
 <div class="commentBox">\
 <h3>發(fā)表評論</h3>\
 <b v-if="type">你回復(fù)&nbsp;{{name}}</b>\
 <textarea name="" value="請?zhí)顚懺u論內(nèi)容" v-model="commentText"></textarea>\
 <button class="btn" @click="addComment">發(fā)表</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 = "";
 }
 }
});

comment: [
 {
 name: "有毒的黃同學", //評論人名字
 time: "2016-08-17", 
 content: "好,講得非常好，good",
 reply: [ //回復(fù)評論的信息，是一個數(shù)組，如果沒內(nèi)容就是一個空數(shù)組
 {
 responder: "傲嬌的", //評論者
 reviewers: "有毒的黃同學", //被評論者
 time: "2016-09-05",
 content: "你說得對"
 }
 }
 ]

Vue.component('commemt-content',{
 template:'\
 <div class="commentBox">\
 <h3>評論</h3>\
 <p v-if="comment.length==0">暫無評論，我來發(fā)表第一篇評論！</p>\
 <div v-else>\
 <div class="comment" 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 class="reply" v-for="reply in item.reply">\
  <b>{{reply.responder}}&nbsp;&nbsp;回復(fù)&nbsp;&nbsp;{{reply.reviewers}}<span>{{reply.time}}</span></b>\
  <p @click="changeCommenter(reply.responder,index)"">{{reply.content}}</p>\
  </div>\
 </div>\
 </div>\
 </div>\
 </div>',
 props: ['comment'],
 methods: {
 changeCommenter: function(name,index) {
 this.$emit("change",name,index);
 }
 }
});

var comment = new Vue({
 el: "#comment",
 data: {
 commenter: "session", //評論人，這里會從session拿
 type: 0, //0為評論作者1為評論別人的評論
 oldComment: null, //久評論者的名字
 chosedIndex: -1, //被選中的評論的index
 article: {
 title: "當歸泡水喝的九大功效",
 time: "2016-07-12",
 read:50,
 content: ""
 },
 comment: [] //評論內(nèi)容
 },
 methods: {
 //添加評論
 addComment: function(data) {
 if(this.type == 0) {
 this.comment.push({
  name: 'session',
  time: getTime(),
  content: data,
  reply: []
 });
 //服務(wù)器端
 }else if(this.type == 1){
 this.comment[this.chosedIndex].reply.push({
  responder: 'session',
  reviewers:this.comment[this.chosedIndex].name,
  time: getTime(),
  content: data
 });
 this.type = 0;
 }
 },
 //監(jiān)聽到了點擊了別人的評論
 changCommmer: function(name,index) {
 this.oldComment = name;
 this.chosedIndex = index;
 this.type = 1;
 },
 //監(jiān)聽到了取消評論
 canelCommit: function() {
 this.type = 0;
 }
 }
})