浅谈vue父子组件怎么传值


Posted in Javascript onJuly 21, 2018

背景:最近在做vue的项目,因为页面的逻辑比较复杂,代码量较多,所以就想抽离出一些组件放到component里面。问题就随之来了。

因为vue不提倡在子组件中修改父组件的值,所以如果要这样操作的话就要麻烦一步,而我正好需要这样的操作,于是就查阅了资料

上父组件的代码,引用了exp-group子组件

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible 和 grpData 是传给子组件的属性,一个是普通类型,一个是对象

grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

接下来我要在子组件中改变这两个属性的值传给父组件,先要在子组件中定义一下

props: {
 grpVisible: {
  type: Boolean,
  default: false
 },
 grpData: {
  type: Object
 }
},

首先普通类型的 grpVisible 属性如果要修改,需要定义一个变量将 grpVisible 值复制给这个变量,然后再修改这个变量,传递给父组件,具体见代码

let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件

父组件通过acceptData的参数value接收这个值

acceptData (value) {
 console.log(value)
}, //父组件

如果是对象的话,就需要用Object.assign拷贝一份新的赋值给一个变量,然后修改这个变量,传递给父组件,代码如下:

let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
通过webpack引入第三方库的方法
Jul 20 #Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 #Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 #Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 #Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 #Javascript
JS+H5 Canvas实现时钟效果
Jul 20 #Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 #Javascript
You might like
在JavaScript中调用php程序
2009/03/09 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php生成静态页面的简单示例
2014/04/17 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
微信小程序实现星星评价效果
2018/11/02 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
python算的上脚本语言吗
2020/06/22 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
PHP如何调用MYSQL存储过程
2014/05/30 面试题
中间件分为哪几类
2012/03/14 面试题
小学开学典礼主持词
2014/03/19 职场文书
销售活动策划方案
2014/08/26 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书