Vue把父组件的方法传递给子组件调用(评论列表例子)
Vue把父组件的方法传递给子组件调用(评论列表例子)
效果展示:
相关Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group" v-for="item in list" :key="item.id">
<li class="list-group-item">
<span class="badge">评论人:{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="temp1">
<div>
<div class="form-group">
<span>评论人:</span>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<span>评论内容:</span>
<input type="text" class="form-control" v-model="content">
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary"
@click="postComment"
>
</div>
</div>
</template>
<script>
var commentBox = {
data: function () {
return {
user: '',
content: ''
}
},
template: '#temp1',
methods: {
postComment: function () {
// 分析发表评论的业务逻辑
// 1.评论数据存到哪里去 存到本地
// 2.先组指出一个最新的评论数据对象
//3.想办法把第二步中得到的评论对象 保存到localStorage
// 3.1本地 只支持存放字符串数据 要先掉JSON.stringify
// 3.2在保存最新的评论数据之前,先从localStorage获取之前的评论数据 转换为一个数组对象
// 然后把最新的评论 push到这个数组
// 3.3如果获取的localStorage中评论字符串 为空不存在 则可以返回空'[]' 让JSON.parse()去转换
// 3.4 把最新的评论列表数组 再次调用JSON.stringify转为数组字符串 最后localStorage.setitem
var comment = {id: Date.now(), user: this.user, content: this.content};
console.log(this.user);
//这个是从localStorage中 获取所有的评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
list.unshift(comment);
//重新保存最新的评论数据
localStorage.setItem('cmts', JSON.stringify(list));
this.user = this.content = '';
this.$emit('func');
}
}
}
var vm = new Vue({
el: '#app',
data: {
list: [
{id: Date.now(), user: '李白', content: '天成我材必有用'},
{id: Date.now(), user: '江小白', content: '劝君更尽一杯酒'},
{id: Date.now(), user: '小马', content: '我姓马,风吹草低见牛羊'}
]
},
created:function () {
this.loadComments();
},
methods: {
loadComments: function () {//从localStorage中加载评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]');
this.list = list;
}
},
components: {
'cmt-box': commentBox
}
});
</script>
</body>
</html>
Vue把父组件的方法传递给子组件调用(评论列表例子)的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 父组件中的数据如何传递给子组件
父组件:<template> <div id="app"> <img src="./assets/logo.png"> &l ...
- Vue 组件&组件之间的通信 之 子组件向父组件传值
子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件c ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- Vue2.x中的父组件数据传递至子组件
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
- 如果把父组件的数据实时的传递到子组件:用watch
1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...
- Vue父子组件数据双向绑定,子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- vue项目|在弹窗中引入uchart图表子组件不显示
为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法. 1-解决方式 1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将o ...
随机推荐
- b4和tncl_extract_UNCL_new
# -*- coding:utf-8 -*- import re ''' 适应新版本 注意: 1)17A文件改完后缀后,需要转为UTF-8无BOM格式,才能正确处理. 2)fr = open(file ...
- cmake检测g++编译器是否支持c++11
# 相关链接:https://cmake.org/cmake/help/v3.0/module/CheckCXXCompilerFlag.htmlinclude(CheckCXXCompilerF ...
- Airplace平台
Demo: 左上角:(0, 0)开始导航,手机终端上实时在地图上当前所在显示,当前点以绿色点显示,轨迹点以红色显示. 系统架构:基于移动手机的以网络为辅助的架构.特点:低头顶交流,用户隐私和安全 &g ...
- hdu 5037 周期优化
http://acm.hdu.edu.cn/showproblem.php?pid=5037 有只青蛙踩石子过河,河宽m,有n个石子坐标已知.青蛙每次最多跳L.现在可以在河中再放一些石子,使得青蛙过河 ...
- uva 579 ClockHands 几何初接触 求时针与分针的夹角
貌似是第一次接触几何题... 求时针与分针的夹角,这不是小学生的奥数题么.我小时候也想过这问题的. 每过一小时时针走1/12*360=30度,每过一分钟时针走1/60*30=0.5度,分针走1/60* ...
- java 反射应用
场景需求最近的一次解析数据包中,因为协议有改变,本来的定长的包,现在变为不定长的.举个例子,本来协议中规定,一个包中,有8个标签,但是每次上来的,不一定都有8个,没有的话,硬件过来的都是0.同时里面也 ...
- Nodejs异步框架——async
上次的网页爬虫写完后,又打算做一个爬图的工具.前两天已经写好了代码.思路如下: 分析页面还是采用cheerio,对<div>中的img进行分析抽取,拿到图片的url.然后用childpro ...
- [ACM_动态规划] hdu1003 Max Sum [最大连续子串和]
Problem Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum ...
- winform之combobox
绑定键值对: ArrayList mylist = new ArrayList(); mylist.Add(new DictionaryEntry("WinFormURL", &q ...
- java 实例化泛型且赋值
实例化泛型 Class <T> clazz = (Class <T>) ((ParameterizedType) new Entity().getClass().getGene ...