vue评论组件带表情,vue实现评论回复
这篇文章主要为大家详细介绍了某视频剪辑软件组件实现发表评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件组件实现发表评论的具体代码，供大家参考，具体内容如下
今天看了某视频剪辑软件相关的视频，所以跟着做一个小演示把知识串联起来，内容很简单但是也算是学习道路上的一点进步。
1 思路分析
发表评论模块写入一个组件，提高复用性。
关键点：
1)、子组件通过本地存储向父组件传值
2)、子组件有自己的数据存储用户和内容，即评论人和评论内容，也就是数字正射影像图元素绑定的数据。
3)、点击发表评论后，首先是将各条评论存入本地存储，然后通过在组件出绑定的函数调用父组件中的加载注释()加载评论。
4)、vue生命周期的熟悉。在已创建()中写入loadComments()，每次页面加载就会载入评论数据。
2 源代码
需要vue。j和引导程序。射流研究…两个文件
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
meta http-equiv= X-UA-Compatible content= IE=edge
标题页标题/标题
meta name= viewport content= width=device-width，initial-scale=1
脚本src=./lib/vue.js/script
链接版本=样式表href=./lib/bootstrap.css
风格
李{
列表样式：无；
}
/风格
/头
身体
div id=应用程序
com @func=loadComments/com
ul class=列表组
"列表中的项目"
{ {项目。content } } span class= badge " { item。用户} }/span
/李
/ul
/div
！-评论区组件-
模板id=tmp
差异
div class=窗体-组标签评论人/label input class= form-control id= user v-model:value= user //div
div class=窗体-组标签评论内容/label input class= form-control id= content v-model:value= content //div
divinput type= button class= BTN BTN初级 value=发表评论@click=postComments//div
/div
/模板
脚本
var tmp={
模板：" #tmp "，
数据：函数(){
返回{
用户：,
内容：""
}
},
方法：{
后置评论(){
var comment={user:this.user，content:this。content }；
var list=JSON。解析(本地存储。getitem( cmts ) [])；
list.unshift(注释);
localStorage.setItem(cmts ，JSON。stringify(list))；//数组对象和字符串相互转换的过程
这个。用户=" "；
这个。content=
这个. emit( func )；
}
}
}
var vm=new Vue({
埃尔： #app ，
数据：{
列表：[]
},
已创建(){
这个。加载注释()；
},
方法：{
loadComments(){
这个。list=JSON。解析(本地存储。getitem( cmts ) [])；
}
},
组件：{
com:tmp
}
});
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。