注意：
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. leetcode 60-80 easy

    66.Plus One Given a non-empty array of digits representing a non-negative integer, plus one to the i ...

  2. H5C3--sessionStorage和localStorage的使用

    一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  3. MS17-010远程溢出漏洞 - 永恒之蓝 [CVE-2017-0143]

    MS17-010远程溢出漏洞(永恒之蓝) Ti:2019-12-25 By:Mirror王宇阳 MS17-010 CVE-2017-0143 MS17-010 CVE-2017-0144 MS17-0 ...

  4. WPF学习（8）数据绑定 https://www.cnblogs.com/jellochen/p/3541197.html

    说到数据绑定,其实这并不是一个新的玩意儿.了解asp.net的朋友都知道,在asp.net中已经用到了这个概念,例如Repeater等的数据绑定.那么,在WPF中的数据绑定相比较传统的asp.net中 ...

  5. win10下安装mongodb（解压版）

    首先到官网下载安装包.(https://www.mongodb.com/download-center#community) 1.创建mongodb目录 2.配置文件mongodb.config 3. ...

  6. 学习JDK1.8集合源码之--LinkedList

    1. LinkedList简介 LinkedList是一种可以在任何位置进行高效地插入和移除操作的有序序列,它是基于双向链表实现的.因为它实现了Deque接口,所以也是双端队列的一种实现. 2.Lin ...

  7. github遇到 non-fast-forward错误

    可以参考:这里 解决过程如图所示

  8. Linux安装JDK和Tomcat

    步骤如下: 1)在/root用户下建立jdk和tomcat两个文件夹并上传jdk-7u80-linux-x64.rpm和apache-tomcat-7.0.82.zip   2)安装jdk #  rp ...

  9. 转：国内从事CV相关的企业

    http://blog.csdn.net/carson2005/article/details/7356225 经常碰到朋友问我国内从事计算机视觉(CV)领域的公司的发展情况,产品情况,甚至找工作等问 ...

  10. 【python小随笔】进程池 multiprocessing.Pool的简单实现与踩过的坑

    #导入进程模块 import multiprocessing #创建进程池 坑:一定要在循环外面创建进程池,不然会一直创建 pool = multiprocessing.Pool(30) for Si ...