Brief discussion on how to pass values ​​for vue parent-child components

Background: I am working on vue projects recently. Because the page logic is relatively complex and the code is large, I want to extract some components and put them into the component. The problem follows.

Because vue does not recommend modifying the value of the parent component in child components, it will be a problem if you want to operate like this. I just need this operation, so I checked the information

The code on the parent component references the exp-group child component

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible and grpData are attributes passed to subcomponents, one is a normal type and the other is an object

grpVisible: false,
grpData: {app: this.$, exp: this.$},

Next, I want to change the values ​​of these two properties in the child component and pass them to the parent component. First, I need to define it in the child component.

props: {
 grpVisible: {
  type: Boolean,
  default: false
 },
 grpData: {
  type: Object
 }
},

First, if you want to modify the grpVisible property of the normal type, you need to define a variable to copy the grpVisible value to this variable, and then modify this variable and pass it to the parent component. See the code for details.

let demo1 = 
demo1 = true
this.$emit('updateData', demo1) //Subcomponent

The parent component receives this value through the acceptData parameter value

acceptData (value) {
 (value)
}, // Parent component

If it is an object, you need to copy a new value to a variable, then modify the variable and pass it to the parent component. The code is as follows:

let demo1 = ({}, )
 = 'binge'
this.$emit('updateData', demo1)

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.