详解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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
使用JS实现简易计算器
Jun 14 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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实现Socket服务器的代码
2008/04/03 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP实现验证码校验功能
2017/11/16 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
use jscript List Installed Software
2007/06/11 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
javascript时间函数大全
2014/06/30 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
详解Python的单元测试
2015/04/28 Python
Python线程详解
2015/06/24 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python实现K最近邻算法
2018/01/29 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python二维码生成识别实例详解
2019/07/16 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
django从后台返回html代码的实例
2020/03/11 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
自荐书范文范例
2014/02/13 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python