注意：
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. NPOI 1.0

    1 应用组件 using NPOI.SS.UserModel; using NPOI.HSSF.Util; 2.一个简单demo    2.1 定义单元格常用到样式的枚举 public enum st ...

  2. 洛谷 3398 仓鼠找sugar——树链剖分

    题目:https://www.luogu.org/problemnew/show/P3398 原来只要把值记录成第几次就行了. 别忘了while(top[a]!=top[b])之后还要走一步. #in ...

  3. poj 2001 Shortest Prefixes(字典树trie 动态分配内存)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15610   Accepted: 673 ...

  4. org.apache.jasper.JasperException: xxxx.jsp(118,24) Attribute style invalid for tag formatNumber according to TLD

    错误:org.apache.jasper.JasperException: /projm/projBudgetChangeOverview.jsp(118,24) Attribute style in ...

  5. Spring Boot → 06：项目实战-账单管理系统

    Spring Boot → 06:项目实战-账单管理系统

  6. 源码：自己用Python写的iOS项目自动打包脚本

    http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...

  7. JSP Web第三章整理复习 开发环境搭建

    P86  WEB工作原理 用户使用浏览器通过HTTP协议请求服务器上的Web资源,服务器接收到该请求后,读取请求的URI所标识的资源,加上其他资源发送给客户端的浏览器,浏览器解析响应中的HTML数据, ...

  8. 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...

  9. [React Native]升级React Native版本

    React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...

  10. 【JZOJ4890】【NOIP2016提高A组集训第14场11.12】随机游走

    题目描述 YJC最近在学习图的有关知识.今天,他遇到了这么一个概念:随机游走.随机游走指每次从相邻的点中随机选一个走过去,重复这样的过程若干次.YJC很聪明,他很快就学会了怎么跑随机游走.为了检验自己 ...