注意：
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. RQNOJ PID141 / 寻找代表元 [2017年6月计划 二分图01]

    PID141 / 寻找代表元 ☆ 提交你的代码 查看讨论和题解 1分前 我的状态 已通过 2017-06-28 21:03:46 运行耗时:31 ms 运行内存:28048 KB 查看最后一次评测记录 ...

  2. Codeforces 1150D（字符串dp）

    反思 三维的dp压根没看出来,看题解以后思路又很直观,找几道字符串dp练练才行 序列自动机和优化一维略 /* __ __ * ____| |_____| |____ * | | * | __ | * ...

  3. androidstudio如何用github多人开发

    一.首先我们利用github作为代码库,有两种方法可以创建代码库 一定要配置好git环境和创建好github账号 检测git环境配置 检测github账号是否能登录 成功就会 (1)在github中直 ...

  4. javascript:void(0);用法及常见问题解析

    void 操作符用法格式: javascript:void (expression) 下面的代码创建了一个超级链接,当用户以后不会发生任何事.当用户链接时,void(0) 计算为 0,但 Javasc ...

  5. 转搞定python多线程和多进程

    转自https://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小 ...

  6. python第二天 : 计算机基础(二)

    目录 1.什么是编程 2.操作系统有什么用? 3.计算机由哪三大部分组成? 4.简述操作系统和应用程序的启动流程? 5.编程语言的分类有哪些?并评估各个分类的优缺点. 1).机器语言 2).汇编语言 ...

  7. React项目动态设置title标题

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢?1.在定义路由时增 ...

  8. element-ui表格列金额显示两位小数

    对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值 和 v-b ...

  9. 【水滴石穿】bstmy-blend-app

    这个项目是一个简单的底部导航切换页面 项目的地址为:https://github.com/Bstmy/bstmy-blend-app 先看效果 点击首页是首页面,点击个人中心是个人中心页面 先看代码 ...

  10. SurfaceFlinger与Surface概述

    基本原理: SF一个Client对应一个app中的SurfaceComposerClient, 分别是Binder的n端和b端,主要用来CreateSurface 一个app中有多个Activity, ...