详解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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
javascript实现拼图游戏
Jan 29 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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生成静态页面详解
2006/12/05 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
python中的yield使用方法
2014/02/11 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
培训演讲稿范文
2014/01/12 职场文书
读书活动实施方案
2014/03/10 职场文书
党员承诺践诺书
2014/05/20 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年学习部工作总结
2014/11/12 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js