详解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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
推荐10个2014年最佳的jQuery视频插件
2014/11/12 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python lambda和Python def区别分析
2014/11/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python之生产者消费者模型实现详解
2019/07/27 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
公积金单位接收函
2014/01/11 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
php png失真的原因及解决办法
2021/11/17 PHP