浅谈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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
asp 取文本框名称代码
Dec 02 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
webpack的pitching loader详解
Sep 23 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JS 创建对象的模式实例小结
Apr 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP与MySQL交互使用详解
2006/10/09 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
Javascript之文件操作
2007/03/07 Javascript
javascript import css实例代码
2008/07/18 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
通过C++学习Python
2015/01/20 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python实现图片彩色转化为素描
2019/01/15 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python中np是做什么的
2020/07/21 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
python的dict判断key是否存在的方法
2020/12/09 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
商务邀请函范文
2014/01/14 职场文书
专家推荐信怎么写
2015/03/25 职场文书
详解Laravel制作API接口
2021/05/31 PHP
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
如何利用React实现图片识别App
2022/02/18 Javascript