浅谈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 相关文章推荐
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
js中new一个对象的过程
Feb 20 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
layui实现动态和静态分页
Apr 28 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
TypeScript类型声明书写详解
Aug 28 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
长波有什么东西
2021/03/01 无线电
深入php中var_dump方法的使用详解
2013/06/24 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
利用php输出不同的心形图案
2016/04/22 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python的多重继承的理解
2017/08/06 Python
Python统计单词出现的次数
2018/04/04 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
python频繁写入文件时提速的方法
2019/06/26 Python
python3 求约数的实例
2019/12/05 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
应届大学生求职信
2014/07/20 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs