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 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
js实现自定义进度条效果
Mar 15 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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 xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python连接数据库学习之DB-API详解
2017/02/07 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
深入浅析Python的类
2018/06/22 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
Python如何对XML 解析
2020/06/28 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
五一手机促销方案
2014/03/08 职场文书
党课培训主持词
2014/04/01 职场文书
合伙经营协议书
2014/04/18 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python