背景:最近在做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父子组件传值

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“浅谈vue父子组件怎么传值”

暂无“浅谈vue父子组件怎么传值”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。