Vue.js实战之组件之间的数据传递


Posted in Javascript onApril 01, 2017

前言

Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。

首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件。

Vue.js实战之组件之间的数据传递

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

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

子组件部分:

Vue.js实战之组件之间的数据传递

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

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

Vue.js实战之组件之间的数据传递

父组件部分:

Vue.js实战之组件之间的数据传递

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

Vue.js实战之组件之间的数据传递

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

Vue.js实战之组件之间的数据传递

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

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

子组件部分:

Vue.js实战之组件之间的数据传递 

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

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

Vue.js实战之组件之间的数据传递

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

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

父组件部分:

Vue.js实战之组件之间的数据传递

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

Vue.js实战之组件之间的数据传递 

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

Vue.js实战之组件之间的数据传递

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

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
Ucren Virtual Desktop V2.0
Nov 07 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
了解JavaScript中的选择器
May 24 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 #Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
前端自动化开发之Node.js的环境搭建教程
Apr 01 #Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 #Javascript
手机端转换rem适应
Apr 01 #Javascript
ES6新特性之变量和字符串用法示例
Apr 01 #Javascript
ES5学习教程之Array对象
Apr 01 #Javascript
You might like
8个必备的PHP功能实例代码
2013/10/27 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
javascript 写类方式之三
2009/07/05 Javascript
js DOM模型操作
2009/12/28 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
jquery实现购物车基本功能
2019/10/25 jQuery
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python无序链表删除重复项的方法
2020/01/17 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
会计专业毕业自荐书范文
2014/02/08 职场文书
学雷锋的心得体会
2014/09/04 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书