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

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

window.onunload=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>

转载   https://blog.csdn.net/qq_42036616/article/details/82955967

vue 组件评论 的同时进行刷新的更多相关文章

  1. vue组件重新加载（刷新）

    vue组件重新加载(刷新) 第一种方法:利用v-if控制router-view,在根组件APP.vue中实现一个刷新方法 <template> <router-view v-if=& ...

  2. VUE组件 之 倒计时（防刷新）

    思路: 一.效果图: 二.CSS代码 .box{ width: 300px; height: 100px; line-height: 100px; margin: 100px auto; backgr ...

  3. vue组件---组件注册

    (1)组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) ...

  4. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  5. vue2.0 如何自定义组件（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  6. VUE组件汇总

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  7. python 全栈开发，Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  8. 滴滴开源 Vue 组件库— cube-ui

    cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...

  9. vue组件原生事件以及路由

    1.组件 组件就是可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素 1.1组件注册 全局注册: 组件注册时,需要给他一个名字,如下: Vue.component('m ...

随机推荐

  1. git出现“The file will have its original line endings in your working directory”错误

    一.现象: git add *时出现如下现象: The file will have its original line endings in your working directory 解决: G ...

  2. HR招聘_(八)_招聘方法论（面试环节·问题设计）

    基本情况: 您目前是在职还是离职?最快的到岗时间是? 目前的薪资情况如何,期望薪资是? 您是哪里人,单身吗? 动机判断: 您看机会主要考虑哪些因素? 最重要的是什么? 未来两三年的职业规划是? 您住在 ...

  3. JSP页面中验证码的调用方法

    步骤: 1.首先是要生成验证码 2.对验证码类进行调用:主要 实现的是  将验证码图片 输出到response.getOutputStream()这个输出流中 调用时,可以在页面调用,也可以在serv ...

  4. PHP的生成图片或文字水印的类

    ImageWatermark.php <?php /*********************************************************** 类名:ImageWat ...

  5. solr dataimport中遇到的问题

    1.windows的tomcat是没有catalina.out的,可以通过修改start.bat和catalina.bat的方式让日志输出到catalina.out 2.按照网上搜到的资料配置好sol ...

  6. 【时光回溯】【JZOJ3566】【GDKOI2014】阶乘

    题目描述 输入 第一行有一个正整数T,表示测试数据的组数. 接下来的T行,每行输入两个十进制整数n和base. 输出 对于每组数据,输出一个十进制整数,表示在base进制下,n!结尾的零的个数. 样例 ...

  7. Spring Boot 学习填的坑一

    1.关于springBoot自动扫描规则: SpringBoot项目的Bean装配默认规则是根据Application类所在的包位置从上往下扫描! "Application"类是指 ...

  8. 模板内置函数(HTML)

    模板内置函数 注意:1.html书写避免多余的空格,否则可能无法被识别 2.模板是用来渲染的不要用来处理逻辑 后台ctime=datetime.datatime.now() {{ctime|date: ...

  9. oracle-ORA-01555错误

    Snapshot too old 原因:没有足够的撤销空间满足读一致性而需要撤销信息的长查询

  10. ubuntu16.04如何查看内存和CPU的使用情况

    ubuntu16.04如何查看内存和CPU的使用情况? 使用一下命令: gnome-system-monitor