Vue 父子组件的数据传递、修改和更新方法


Posted in Javascript onMarch 01, 2018

父子组件之间的数据关系,我这边将情况具体分成下面4种:

父组件修改子组件的data,并实时更新

子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据,

this.$emit('data',this.$data);

之后通过父组件的getinputdata方法来接收数据

@data='getinputdata'

其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

子组件修改父组件的data

在子组件中是修改不了父组件的data的,只有通过上面的$emit方法在父组件中修改数据。

可参考vue官网的自定义事件:https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6

子组件获取父组件的data,修改但不实时更新

1. 子组件将父组件通过props传递的数据,再把props的值赋给let或var声明变量,之后使用这个变量就可以了。

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. 子组件将父组件通过props传递的数据,再把props的值赋给data(return{...})里的变量,之后使用这个变量就可以了。

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

可参考vue官网的自定义事件:https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

父组件获取子组件的data,修改但不实时更新

这边的方法和‘子组件获取父组件的data,修改但不实时更新'的方法一样,其中只有传值的方式有区别。子组件通过$emit把值传给父组件。

以上这篇Vue 父子组件的数据传递、修改和更新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 #Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 #Javascript
React Native 图片查看组件的方法
Mar 01 #Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 #Javascript
You might like
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
utf8的编码算法 转载
2006/12/27 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
jQuery 技巧小结
2010/04/02 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
执行Python程序时模块报错问题
2020/03/26 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
文明村创建实施方案
2014/03/27 职场文书
公司任命书范本
2014/06/04 职场文书
优秀教师个人材料
2014/12/15 职场文书
小学生作文批改评语
2014/12/25 职场文书
人事专员岗位职责
2015/02/03 职场文书
单位实习介绍信
2015/05/05 职场文书
工程款催款函
2015/06/24 职场文书
父亲节感言
2015/08/03 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技