如何用vuejs实现评论功能
这篇文章主要介绍“如何用vuejs实现评论功能”，在日常操作中，相信很多人在如何用vuejs实现评论功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用vuejs实现评论功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联主打移动网站、成都网站设计、做网站、网站改版、网络推广、网站维护、域名注册、等互联网信息服务，为各行业提供服务。在技术实力的保障下，我们为客户承诺稳定，放心的服务，根据网站的内容与功能再决定采用什么样的设计。最后，要实现符合网站需求的内容、功能与设计，我们还会规划稳定安全的技术方案做保障。
用vuejs实现评论功能的方法：1、使用article-content组件，绑定一个obj；2、通过commemt-content组件实现评论功能即可。
本文操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
怎么用vuejs实现评论功能?
Vue.js实现文章评论和回复评论功能:
本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。
先上在线demo：http://jsbin.com/ceqifo/1/edit?js,output
再上效果图
可直接评论，点击别人的评论能回复别人的评论。
html
数据全都由根组件绑定下去的。这里还监听了几个事件。
然后先说个简单点的，，文本框的那个组件。
Vue.component('commentTextarea',{
template:'\
\
发表评论
\
你回复 {{name}}\
\
发表\
取消\
',
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: "你说得对"
}
}
]再来看commemt-content组件
Vue.component('commemt-content',{
template:'\
\
评论
\
暂无评论，我来发表第一篇评论！\
\
\
{{item.name}}{{item.time}}\
{{item.content}}\
0">\
\
{{reply.responder}} 回复 {{reply.reviewers}}{{reply.time}}\
{{reply.content}}\
