好资源导航 » 文章资讯 » 浅谈vue父子组件怎么传值

浅谈vue父子组件怎么传值

2023-09-10 01:07:04 59

背景：最近在做vue的项目，因为页面的逻辑比较复杂，代码量较多，所以就想抽离出一些组件放到component里面。问题就随之来了。

因为vue不提倡在子组件中修改父组件的值，所以如果要这样操作的话就要麻烦一步，而我正好需要这样的操作，于是就查阅了资料

上父组件的代码，引用了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值复制给这个变量，然后再修改这个变量，传递给父组件，具体见代码

letdemo1=this.grpVisible
demo1=true
this.$emit('updateData',demo1)//子组件

父组件通过acceptData的参数value接收这个值

acceptData(value){
console.log(value)
},//父组件

如果是对象的话，就需要用Object.assign拷贝一份新的赋值给一个变量，然后修改这个变量，传递给父组件，代码如下：

letdemo1=Object.assign({},this.grpData)
demo1.app='binge'
this.$emit('updateData',demo1)

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