深入理解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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jQuery链使用指南
Jan 20 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue登录路由验证的实现
Dec 13 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 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使用curl访问https示例分享
2014/01/17 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
jquery选择器简述
2015/08/31 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
videocapture库制作python视频高速传输程序
2013/12/23 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
wxPython实现绘图小例子
2019/11/19 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python实现堆排序的实例讲解
2020/02/21 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
大学生个人求职信范文
2013/09/21 职场文书
产品销售员岗位职责
2013/12/18 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
军训自我鉴定200字
2014/02/13 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2015年女职工工作总结
2015/05/15 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
nginx容器方式反向代理实战
2022/04/18 Servers
Golang 链表的学习和使用
2022/04/19 Golang