详解vue 数据传递的方法


Posted in Javascript onApril 19, 2018

组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。

1.父组件向子组件传值

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。

子组件:

详解vue 数据传递的方法

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

详解vue 数据传递的方法

父组件:

详解vue 数据传递的方法

2.子组件向父组件传值

子组件主要通过事件传递数据给父组件。

子组件:

详解vue 数据传递的方法详解vue 数据传递的方法

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

父组件:

详解vue 数据传递的方法详解vue 数据传递的方法

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

3.路由传值

详解vue 数据传递的方法详解vue 数据传递的方法

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

详解vue 数据传递的方法

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

详解vue 数据传递的方法

5.Vuex

在应用复杂时,推荐使用vue官网推荐的vuex。

https://vuex.vuejs.org/zh-cn/getting-started.html

Javascript 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
canvas绘制的直线动画
Jan 23 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
vue实现公共方法抽离
Jul 31 Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 #Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 #Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 #Javascript
详解react-redux插件入门
Apr 19 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php mail to 配置详解
2014/01/16 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
js的event详解。
2006/09/06 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python实现简单名片管理系统
2018/11/30 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
学生打架检讨书大全
2014/01/23 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
食品工程专业求职信
2014/06/15 职场文书
关爱残疾人标语
2014/06/25 职场文书
旷工辞退通知书
2015/04/17 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书