深入理解Vue 组件之间传值


Posted in Javascript onAugust 16, 2018

一、父组件向子组件传递数据

在 Vue 中,可以使用props向子组件传递数据。

子组件部分:

深入理解Vue 组件之间传值

这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量。

如果需要从父组件获取 logo 的值,就需要使用props: ['logo']

深入理解Vue 组件之间传值

在 props 中添加了元素之后,就不需要在 data 中再添加变量了

父组件部分:

深入理解Vue 组件之间传值

在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg

深入理解Vue 组件之间传值

然后就能将App.vue中 logoMsg 的值传给 header.vue 了:

深入理解Vue 组件之间传值

二、子组件向父组件传递数据

子组件主要通过事件传递数据给父组件

子组件部分:

深入理解Vue 组件之间传值

这是 login.vue 的 HTML 部分,当<input>的值发生变化的时候,将 username 传递给 App.vue

首先声明一个了方法setUser,用 change 事件来调用 setUser

深入理解Vue 组件之间传值

在 setUser 中,使用了$emit来遍历transferUser事件,并返回 this.username

其中transferUser是一个自定义的事件,功能类似于一个中转,this.username将通过这个事件传递给父组件

父组件部分:

深入理解Vue 组件之间传值

在父组件 App.vue 中,声明了一个方法 getUser,用 transferUser 事件调用 getUser 方法,获取到从子组件传递过来的参数 username

深入理解Vue 组件之间传值

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

深入理解Vue 组件之间传值

三、子组件向子组件传递数据

Vue 没有直接子对子传参的方法,建议将需要传递数据的子组件,都合并为一个组件。如果一定需要子对子传参,可以先从传到父组件,再传到子组件。

为了便于开发,Vue 推出了一个状态管理工具 Vuex,可以很方便实现组件之间的参数传递

总结

以上所述是小编给大家介绍的Vue 组件之间传值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
javascript 三种编解码方式
Feb 01 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
Express的路由详解
Dec 10 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
You might like
提升PHP性能的21种方法介绍
2013/06/25 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js中的this关键字详解
2013/09/25 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python实现多行注释的另类方法
2014/08/22 Python
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python计算auc的方法
2020/09/09 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
自我鉴定注意事项
2014/01/19 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
降消项目实施方案
2014/03/30 职场文书
英文演讲稿
2014/05/15 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
建筑工程催款函
2015/06/24 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Hive日期格式转换方法总结
2022/06/25 数据库