详解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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
纯JS实现轮播图
Feb 22 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python中PIL安装简单教程
2016/04/21 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
keras K.function获取某层的输出操作
2020/06/29 Python
8种常用的Python工具
2020/08/05 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
2014年学习雷锋活动总结
2014/03/01 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
就业推荐表院系意见
2015/06/05 职场文书
城南旧事读书笔记
2015/06/29 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
python_tkinter弹出对话框创建
2022/03/20 Python