详解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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
vue文件树组件使用详解
Mar 29 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 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脚本的10个技巧(1)
2006/10/09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP中的替代语法介绍
2015/01/09 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python3处理word文档实例分析
2020/12/01 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
节水口号标语
2014/06/19 职场文书
春游踏青活动方案
2014/08/14 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
通知函格式范文
2015/04/27 职场文书
卫生主题班会
2015/08/14 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
MySQL RC事务隔离的实现
2022/03/31 MySQL