详解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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 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 求质素(素数) 的实现代码
2011/04/12 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
js实现自定义路由
2017/02/04 Javascript
Vuex简单入门
2017/04/19 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
python链接Oracle数据库的方法
2015/06/28 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python交换两个变量的值方法
2019/01/12 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
xml有哪些解析技术?区别是什么
2016/04/26 面试题
大课间活动实施方案
2014/03/06 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
会计核算科岗位职责
2014/03/19 职场文书
财务人员担保书
2014/05/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python