详解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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
JS定时器实例
Apr 17 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
Javascript函数式编程语言
Oct 11 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
swiper4实现移动端导航切换
Oct 16 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
js 编写规范
2010/03/03 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
Python Web服务器Tornado使用小结
2014/05/06 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Weblogic和WebSphere不同特点
2012/05/09 面试题
白酒市场营销方案
2014/02/25 职场文书
美丽心灵观后感
2015/06/01 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android