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中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 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
?繁体转换的class
2006/10/09 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
经验几则 推荐
2006/09/05 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python向图片里添加文字
2019/11/26 Python
python写一个随机点名软件的实例
2019/11/28 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
如何写你的创业计划书
2014/01/07 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
企业2014年度工作总结
2014/12/10 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
客户答谢会致辞
2015/07/30 职场文书