vue-组件评论功能的实现

效果图

效果图

起步

涉及知识：

• vue父子组件定义以及传值
• H5 localStorage
• JSON.stringify()和JSON.parse()

效果分析

页面构成

• 父组件包含评论列表

• 子组件包含评论人、评论内容以及评论时间

  
  
  页面结构

发表评论功能[子组件]

1. 先组织出一个最新的评论数据 如：{user:'张三',content:'今天天气不错~'}
2. 定义变量var list。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，JSON.parse()【从一个字符串中解析出json对象，再localStorage.getItem('cmts')||'[]'
3. 把组织出的最新的评论数据push至list数组 如：list.unshift(最新的评论数据)
   注：unshift()-----向数组的开头添加一个或多个元素，并且返回新的长度
4. 把第一步得到的评论数据，保存到localStorage中
   注：
   4.1 localStorage只支持存放字符串数据，要先JSON.stringify。JSON.stringify()【从一个对象中解析出字符串】
   4.2 把最新的评论列表数组，存入本地存储localStorage中，首先调用JSON.stringify转为数据字符串【localStorage只支持存放字符串数据】，然后调用localStorage.setItem('','')
5. 父组件把加载评论功能传递给子组件（子组件可以调用父组件函数），点击发表评论，从本地的localStoage中，加载评论列表 $emit()

加载评论列表[父组件]

1. 定义变量var list。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，JSON.parse()【从一个字符串中解析出json对象，再localStorage.getItem('cmts')||'[]'
2. created()钩子函数开始执行时，从本地的localStoage中取出数据，加载评论列表

代码实现

页面构成

注：这里的样式均引用bootstrap

    
    

    
    

        

            评论人：{{item.user}}
            {{item.content}}
        
    
    

数据：

发表评论功能[子组件]

methods:{
    /*点击发表评论按钮触发函数*/
    postComment(){
        /*组织出一个最新的评论数据*/
        var comment={id:Date.now(),user:this.user,content:this.content}

        /*localStorage获取到之前评论数据(string)，转换为一个数组对象*/
        var list=JSON.parse(localStorage.getItem('cmts')||'[]')

        /*把组织出的最新的评论数据push至list数组*/
        list.unshift(comment)

        /*重新保存最新的评论*/
        localStorage.setItem('cmts',JSON.stringify(list))

        /*清空输入框*/
        this.user=this.content=''

        /*子组件调用父组件加载评论列表功能函数*/
        this.$emit('func')
    }
}

localStorage存入效果：[点击f12查看]

localStorage

加载评论列表[父组件]

methods:{
    /*加载评论列表*/
    loadComments(){ 
        /*从本地的localStoage中，加载评论列表*/
        var list=JSON.parse(localStorage.getItem('cmts')||'[]')
        this.list=list
    }
},
/*页面刚加载执行函数*/
created(){
    this.loadComments()
},

完整代码

    
    
    
    
    
    



    

        

        

            

                评论人：{{item.user}}
                {{item.content}}
            
        
        
    

    
    

小结

• vue父子组件传函数方法:
  • 父组件定义函数---loadComments(){ …… }
  • 子组件定义父组件函数方法---@func="loadComments"
  • 子组件引用父组件函数方法---this.$emit('func')
• H5 localStorage:
  • localStorage中一般浏览器支持的是5M大小
  • localStorage.setItem("key","value")：存储名字为key的一个值value，如果key存在，就更新value
  • localStorage.getItem("key")：获取名称为key的值，如果key不存在则返回null
  • localStorage.removeItem("key")：删除名称为"key"的信息，这个key所对应的value也会全部被删除
  • localStorage.clear()：清空localStorage中所有信息
• JSON.stringify()和JSON.parse()
  • JSON.parse(); 将字符串格式转换成JSON对象进行处理
  • JSON.stringify(); 将JSON对象转换成字符串格式

来源我的博客：我的博客