欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈vue父子组件怎么传值

程序员文章站 2022-08-18 16:14:16
背景:最近在做vue的项目,因为页面的逻辑比较复杂,代码量较多,所以就想抽离出一些组件放到component里面。问题就随之来了。 因为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)

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