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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php中session定期自动清理的方法
2015/11/12 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
python中将字典形式的数据循环插入Excel
2018/01/16 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python3 max()函数基础用法
2019/02/19 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
秘书英文求职信范文
2014/01/31 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
毕业生自荐信范文
2015/03/05 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
nginx安装以及配置的详细过程记录
2021/09/15 Servers