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 不能释放内存.
Sep 07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
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
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php计算函数执行时间的方法
2015/03/20 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
关于Python作用域自学总结
2019/06/10 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
初三学生个人自我评定
2014/04/06 职场文书
法制宣传日活动总结
2014/04/29 职场文书
保护野生动物倡议书
2014/05/16 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
实习单位指导教师评语
2014/12/30 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
管理人员岗位职责
2015/02/14 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Django中的JWT身份验证的实现
2021/05/07 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
一级电子管军用接收机测评
2022/04/05 无线电