详解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 相关文章推荐
学习面向对象之面向对象的术语
Nov 30 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
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数组保存文本与文本反编成数组实例
2014/11/13 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP实现的日历功能示例
2018/09/01 PHP
JavaScript触发器详解
2007/03/10 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python添加模块搜索路径方法
2017/09/11 Python
python中嵌套函数的实操步骤
2019/02/27 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
高中毕业自我鉴定
2013/12/19 职场文书
领导的自我鉴定
2013/12/28 职场文书
《都江堰》教学反思
2014/02/07 职场文书
商业房地产广告语
2014/03/13 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
志愿者事迹材料
2014/12/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书