详解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 相关文章推荐
JS加ASP二级域名转向的代码
May 17 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
js实现图片上传并预览功能
Aug 06 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
angular异步验证器防抖实例详解
Mar 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数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Javascript之文件操作
2007/03/07 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python实现名片管理器的示例代码
2019/12/17 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
校园门卫岗位职责
2013/12/09 职场文书
班班通校本培训方案
2014/03/12 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2014年妇联工作总结
2014/11/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL