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和css的jquery代码
Sep 01 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
jQuery each函数源码分析
May 25 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
简单的js表格操作
2016/09/24 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python中进程和线程的区别详解
2017/10/29 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
python简单的三元一次方程求解实例
2020/04/02 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
英文简历中的自我评价
2013/10/06 职场文书
经销商会议欢迎词
2014/01/11 职场文书
大学生创业策划书
2014/02/02 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
产品推广策划方案
2014/05/10 职场文书
建筑工地标语
2014/06/18 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
银行工作心得体会范文
2016/01/23 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle