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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
小程序实现抽奖动画
Apr 16 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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
linux实现php定时执行cron任务详解
2013/12/24 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php工具型代码之印章抠图
2018/07/18 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
13个PHP函数超实用
2015/10/21 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
js模拟微博发布消息
2017/02/23 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
JS实现滑动插件
2020/01/15 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
Python是编译运行的验证方法
2015/01/30 Python
python使用append合并两个数组的方法
2015/04/28 Python
使用python实现生成用户信息
2017/03/20 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python pip如何手动安装二进制包
2020/09/30 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
请说出以下代码输出什么
2013/08/30 面试题
大专生自荐信
2013/10/04 职场文书
怎么写好自荐书
2014/03/02 职场文书
公司接待方案
2014/03/08 职场文书
女生节标语
2014/06/26 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers