欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

浅谈vue父子组件怎么传值

时间:2021-06-18 08:44:21|栏目:vue|点击:

背景:最近在做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)

上一篇:vue刷新页面时去闪烁提升用户体验效果的实现方法

栏    目:vue

下一篇:vue2.0获取鼠标位置的方法

本文标题:浅谈vue父子组件怎么传值

本文地址:http://www.codeinn.net/misctech/143827.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有