这篇文章主要介绍了浅谈vue父子组件怎么传值,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
背景：最近在做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 值复制给这个变量，然后再修改这个变量，传递给父组件，具体见代码
let demo<i style="color:transparent">本文来源gaodai$ma#com搞$$代**码)网8</i>1 = 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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是浅谈vue父子组件怎么传值的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：浅谈vue父子组件怎么传值
转载请注明原文链接：浅谈vue父子组件怎么传值
