详解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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jQuery 联动日历实现代码
May 31 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
python中随机函数random用法实例
2015/04/30 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python的flask框架难学吗
2020/07/31 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
给全校老师的建议书
2014/03/13 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
检讨书模板
2015/01/29 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
小学感恩主题班会
2015/08/12 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技