注意:
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. golang标准库中有些函数只有签名没有函数体是怎么回事?

  2. PHP 学习1.3

    1.展示类的继承和静态的方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 怎样判断一个exe可执行程序(dll文件)是32位的还是64位的

    看到一个比较简单粗暴的方式,做个记录. 直接用记事本或者notepad++(文本编辑软件都可)打开exe文件(dll文件), 会有很多乱码,接下来只需要在第二段中找到PE两个字母,在其后的不远出会出现 ...

  4. html DOM(CSS放置位置的问题)

    转载自: http://www.php.cn/div-tutorial-386900.html (本文对读者有帮助的话请移步支持原作者) 笔记: 这样会先加载css的样式,在渲染dom的时候已经知道了 ...

  5. meta标签、利用媒体查询 link不同的CSS文件

    利用媒体查询 link不同的CSS文件:<link rel="stylesheet" media="screen and (min-width:1px) and ( ...

  6. C# 如何比较版本号大小

    最近遇到了一个数据迁移的问题,因为配置文件的结构发生变化,所以要把低版本的用户数据保存下来,存到最新版本中去. 这里就有一个比较版本号大小的问题了,网上乱七八糟算法一堆,大致意思就是用分割字符串的方法 ...

  7. shell 中数组学习

         因为应用shell的时间不是太长.对于数组在实际项目中没有接触过.今天在需要把相似于:a=1,2,3,4这种东西转换. 之前用的方法是用awk,分别取出.所以今天想是否有更好更简洁的方法-- ...

  8. jQuery中的工具和插件

    jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...

  9. 洛谷 P1948 [USACO08JAN]电话线Telephone Lines 最短路+二分答案

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1948 [USACO08JAN]电话线Telephone ...

  10. 云服务器 ECS Linux Web 环境配置站点的方法

    摘自:https://help.aliyun.com/knowledge_detail/41100.html ECS Linux 系统一键安装 Web 环境<专业版>下 Tomcat 添加 ...