详解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技术技巧大全(五)
Jan 22 Javascript
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
JavaScript类的写法
Sep 17 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 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实现采集中国天气网未来7天天气
2014/10/15 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php实现登录页面的简单实例
2019/09/29 PHP
javascript 实现map集合
2015/04/03 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python生成式的send()方法(详解)
2017/05/08 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python多线程下信号处理程序示例
2019/05/31 Python
python用700行代码实现http客户端
2021/01/14 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Internet主要有哪些网络群组成
2015/12/24 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
水果超市创业计划书
2014/01/27 职场文书
运动会通讯稿50字
2014/01/30 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
单位介绍信格式范文
2015/05/04 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
java设计模式--原型模式详解
2021/07/21 Java/Android