详解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的商品展示放大镜
Aug 07 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
JS修改css样式style浅谈
May 06 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
webpack打包非模块化js的方法
Oct 24 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性能优化注意点
2016/01/04 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
初识javascript 文档碎片
2010/07/13 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
写给女生的道歉信
2014/01/08 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
民事答辩状范本
2015/05/21 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
队名及霸气口号大全
2015/12/25 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
深入理解go slice结构
2021/09/15 Golang