当前位置：首页 > news >正文

vue 组件评论的同时进行刷新

news 来源：原创 2024/5/17 9:46:31

注意：
1.最重要理解这里的父组件的刷新功能，通过v-on事件绑定委托给子组件执行，因为子组件的提交按钮和父组件的刷新评论的功能是分开的。

2.没有数据时直接点击提交按钮时会出bug，并且关闭后重新加载页面还是会存在。因为localStorage在浏览器中是永久缓存的，通过localStorage清除缓存，如下。最后的执行效果，会有演示，本来可以做出判断为空时，不给提交，这里为了说明这个问题

window.οnunlοad=function(){
        localStorage.clear();
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
      <div id="app">
          
          <cmtbox v-on:flash="loadComment"></cmtbox>
          <!--将父组件的方法委托给子组件-->
 
          <ul class="list-group">
              <li class="list-group-item" v-for="item in list" :key="item.id">
                  <span class="badge">{{ item.user }}留言：</span>
                  {{ item.content }}
                  <!--badge:徽章-->
              </li>
          </ul>
      </div>
 
      <template id="tmp">
          <div>
              <div class="form-group">
                  <label>发表人：</label>
                  <input type="text" class="form-control" v-model="user">
              </div>
              
              <div class="form-group">
                  <label>留言内容：</label>
                  <textarea class="form-control" v-model="content"></textarea>
              </div>
               
              <div class="form-group">
                  <input type="button" value="发表" class="btn btn-primary" @click="submit">
              </div>
          </div>
      </template>
      
      <script>
 
          window.onunload=function(){
              localStorage.clear();
          };
          //因为localStorage在浏览器中是永久缓存的，关闭后重新加载页面还是会存在先前的数据，特添加此项
          
          var commentBox = {
            template:'#tmp',
            //  通过id绑定后，直接将组件的内容在<template>定义，更加简单直观
            data(){
                return {
                    user:'',
                    content:'',
                }
            },
            methods:{
                submit(){
                    var comment = { id:Date.now(), user:this.user,content:this.content};
                    //实例化一个新的数组对象
                    
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]');
                    //从localStorage中获取数据
                    list.unshift(comment);
                    //添加在最上端
                    localStorage.setItem('cmts',JSON.stringify(list));
                    //加入更新的对象后，重新刷新localStorage数据
                    
                    this.user = this.content = '';
                    
                    this.$emit('flash');
                    //触发父组件委托的方法
                }
                //发表评论的方法
            }  
          };
          
          var vm = new Vue({
             el:'#app',
             data:{
                 list:[
                     { id:1,user:'陈小帅',content:'马克·吐恩说过:'},
                     { id:2,user:'陈xiao帅',content:'一个拿着棒槌的人'},
                     { id:3,user:'陈大帅',content:'看什么都像钉子'}
                 ]
             },
              components:{
                 'cmtbox':commentBox
                  //将组件命名    
              },
              methods:{
                 loadComment(){
                     var list = JSON.parse(localStorage.getItem('cmts') || '[]');  
                     this.list = list;
                 }
              },
                  created(){
                     this.loadComment();
                  }
          });
      </script>
</body>
</html>