vue父子组件怎样传值

2023年5月1日 159次阅读 来源: yali

背景：近来在做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)
    原文作者：yali
    原文地址: https://segmentfault.com/a/1190000015712854
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞