vue 数据传递的方法
组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。
1.父组件向子组件传值
组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。
子组件:

子组件需要从父组件获取 logo 的值,就需要使用 props: [‘logo']

父组件:

2.子组件向父组件传值
子组件主要通过事件传递数据给父组件。
子组件:

其中 transferUser 是一个自定义的事件,this.username 将通过这个事件传递给父组件 。
父组件:

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username
3.路由传值

使用时,在生命周期created赋值。

4.通过localStorage或者sessionStorage来存储数据

5.Vuex
在应用复杂时,推荐使用vue官网推荐的vuex。
https://vuex.vuejs.org/zh-cn/getting-started.html
vue 数据传递的方法的更多相关文章
- ASP.NET页面间数据传递的方法<转>
ASP.NET页面间数据传递的方法 作者: 灰色的天空2 来源: 博客园 发布时间: 2010-10-28 11:06 阅读: 822 次 推荐: 0 原文链接 [收藏] 摘要:本 ...
- ASP.NET中实现页面间数据传递的方法
说到页面间数据传递,很多人都会想到通过像Session这样的全局变量,但是向Session中添加的东西太多会增加服务器的压力,页面间数据传递,数据的作用范围越小越好. ASP.NET页面间数据传递 ...
- ASP.NET 页面间数据传递的方法
在做WEB开发时,很多地方会涉及到页面间的数据传递.这几天在完善教务基础系统,遇到了这个问题,上网查了一些资料,现总结如下: 说到页面间数据传递,很多人都会想到通过像Session这样的全局变量,但是 ...
- vue数据传递--我有特殊的实现技巧
最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...
- ASP.NET多种不同页面间数据传递的方法
1. Get(即使用QueryString显式传递) 方式:在url后面跟参数. 特点:简单.方便. 缺点:字符串长度最长为255个字符:数据泄漏在url中. 适用数据 ...
- vue数据传递的特殊实现技巧
最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...
- js中子父页面数据传递与方法调用
A父页面 ,B为子页面 1.父页面调用子页面 A中调用B中方法:self.frames[iframeName].BFunction(); 注:iframeName:为父页面中iframe的name属性 ...
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- 详细介绍ASP.NET页面间数据传递的使用方法
源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...
随机推荐
- Scrapy爬虫入门系列3 将抓取到的数据存入数据库与验证数据有效性
抓取到的item 会被发送到Item Pipeline进行处理 Item Pipeline常用于 cleansing HTML data validating scraped data (checki ...
- php zend studio 如何导入已经存在的项目
点击 左上的 file->import ->General->在选择第二个[ Exissting ....]
- Java快车读书笔记
办公自动化:OA 客户关系管理:CRM人力资源:HR 企业资源计划:ERP知识管理:KM 供应链管理:SCM企业设备管理系统:EAM 产品生命周期管理:PLM面向服务体系架构:SOA 商业智能:BI项 ...
- PHP实现自己活了多少岁
1.mktime()函数的功能 2.代码: $birth = mktime(0,0,0,10,2,1992);//出生的时间戳 $time = time();//当前的时间戳 $age = floor ...
- Jmeter做读取csv接口测试
最近在工作中,对jmeter实践的点滴的记录这里分享,不一定正确,仅供参考和讨论,有想法的欢迎留言.谈论. 1技巧1:从csv中获取带引号的数据详情 背景:我们从csv中获取数据,在jmeter中使用 ...
- 【BZOJ2238】Mst 最小生成树+LCA+堆
[BZOJ2238]Mst Description 给出一个N个点M条边的无向带权图,以及Q个询问,每次询问在图中删掉一条边后图的最小生成树.(各询问间独立,每次询问不对之后的询问产生影响,即被删掉的 ...
- Xmind 8 update 4 破解教程(破解补丁+破解步骤+下载地址)
一.原始教程 原教程很详细,直接参考: http://www.voidcn.com/article/p-yyybmcqq-bnz.html 若无法访问请点击:http://df1551e3.wiz03 ...
- set集合可以添加重复元素
set集合判断元素的唯一性要重写hashcode和equals方法,这样就能保证不会加入重复的元素, 但是在以下这种情况下任然可以加入重复元素,即使他们的hashcode和equals方法结果相同 p ...
- 巨蟒django之权限7:动态生成一级&&二级菜单
内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...
- Python3.6全栈开发实例[018]
18.车牌区域划分, 现给出以下车牌.根据车牌的信息, 分析出各省的车牌持有量.(升级题) result = {} for car in cars: location = locals[car[0]] ...