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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
js实现交通灯效果
Jan 13 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JavaScript中Object基础内部方法图
Feb 05 Javascript
Angular2之二级路由详解
Aug 31 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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中feof()函数实例测试
2014/08/23 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
汉语专业应届生求职信
2013/10/01 职场文书
找工作最新求职信
2013/12/22 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
员工手册编写范本
2015/05/14 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers