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 编写匿名函数的几种方法
Feb 21 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
详解ES6中的let命令
Apr 05 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
vue项目前端错误收集之sentry教程详解
May 27 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
详解Javascript事件驱动编程
2016/01/03 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
常用的javascript设计模式
2017/01/11 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python多线程并发实例及其优化
2019/06/27 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
台湾三立电视电商平台:电电购
2019/09/09 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
win10清理dns缓存
2022/04/19 数码科技
muduo TcpServer模块源码分析
2022/04/26 Redis