注意：
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. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  2. Django项目：CRM(客户关系管理系统)--14--06PerfectCRM实现King_admin注册功能获取内存优化处理

    <th >{% get_app_name admin_class.model %}{{ admin_class }} </th> #kingadmin_tags.py # —— ...

  3. Java加密AES算法及spring中应用

    开门见山直接贴上代码 .AESUtil加密解密工具类 import java.security.Key; import java.security.SecureRandom; import java. ...

  4. CI框架--浅谈前后台区分

    谈到CI框架,这是我第二个用到的框架,初步使用过后,眼前一亮.CI框架上手简单.模式明确.适合新手学习框架时入手. 下面给大家讲讲CI框架区分前后台文件的具体做法: 首先在application文件夹 ...

  5. 在VMware安装Windows server 2003操作系统帮助文档

    在VMware上安装Windows server 2003操作系统,及VMware上三种网络连接模式(以VMware 10为例) 一.在Windows上安装VMware 10虚拟机软件 1.首先在Wi ...

  6. python3.7 安装gensim使用word2Vec库

    应用的文章(个人试验过,完全正确):https://radimrehurek.com/gensim/index.html#install

  7. spark-ML基础

    一.ML组件 ML的标准API使用管道(pipeline)这样的方式,可以将多个算法或者数据处理过程整合到一个管道或者一个流程里运行,其中包含下面几个部分: 1. dataFrame:用于ML的dat ...

  8. python基础总结篇

    ''' 数据类型 数值 int: 字符串转int,只能转纯数字组成的字符串 小数,去掉小数部分 bool,true 1 false 0 float: 字符串转float,要么是纯数字的字符串,要么是纯 ...

  9. 权限系统的设计模式 ACL RBAC ABAC

    ACL(Access Control List):访问权限列表  如: user1-->AC1 user1-->AC2 user2-->AC1    此时权限汇总成一个列表 这种设计 ...

  10. 关于serialize() FormData serializeArray()表单序列化

    serialize()  FormData  serializeArray()都是序列化表单,实现表单的异步提交 但是serialize()和serializeArray()都是只能序列化表单中的数据 ...