如何用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}}\
\
\
\
\
',
props: ['comment'],
methods: {
changeCommenter: function(name,index) {
this.$emit("change",name,index);
}
}
});如果没有内容，则显示 “暂无评论，我来发表第一篇评论！”。如果有内容就开始遍历。因为点击评论要知道第几条，所以每条评论要绑一个v-bind:index="index"
到了二次评论那块，还是遍历reply数组，绑定该绑定的。因为就算点击内容，也是加到那条一级评论的最下面，所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已，后面那个index都是一级评论的index。
data那里。。。实在是取名困难症啊。。。commenter是当前登录名，这里到时候会session里拿；type就是看到底是评论作者的还是评论别人的评论的；oldComment就是就评论者的名字（实际储存的时候应该是id）；chosedIndex是被点击的评论的index。
changCommmer是监听到点击了别人评论想回复评论的。即type=1.
addComment就是监听添加评论事件的。根据type的值，push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法，这里是根据type的不同分两个url传还是一个，取决于表的设计。待我明天好好设计表后，加入http请求，完成这个评论功能。
到此，关于“如何用vuejs实现评论功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
