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操作word的参考代码
Oct 26 Javascript
js几个验证函数代码
Mar 25 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP 日常开发小技巧
2009/09/23 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
jQuery 选择器理解
2010/03/16 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
python实现名片管理系统
2018/11/29 Python
详解Python传入参数的几种方法
2019/05/16 Python
python日志模块logbook使用方法
2019/09/19 Python
详解Python3中的 input() 函数
2020/03/18 Python
django queryset相加和筛选教程
2020/05/18 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
详解Python yaml模块
2020/09/23 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
Java程序员面试题
2016/09/27 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
美容院经理岗位职责
2014/04/03 职场文书
水电站项目建议书
2014/05/12 职场文书
淘宝客服工作职责
2014/07/11 职场文书
公司演讲稿开场白
2014/08/25 职场文书
蜗居观后感
2015/06/11 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技