详解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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vuex 实现getter值赋值给vue组件里的data示例
Nov 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php GD绘制24小时柱状图
2008/06/28 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php调整服务器时间的方法
2015/04/03 PHP
图片之间的切换
2006/06/26 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
vue组件实例解析
2017/01/10 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
python如何实现word批量转HTML
2020/09/30 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
分公司经理岗位职责
2013/11/11 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
微信小程序实现轮播图指示器
2022/06/25 Javascript