How to transfer values ​​​​between Vue parent and child components

This article shares with you how to transfer values ​​​​between Vue parent and child components. The content is very good. Friends in need can refer to it. I hope it can help everyone.

Background: I have been working on a vue project recently. Because the logic of the page is relatively complex and the amount of code is large, I want to extract some components and put them in the component. The problem then arises.
Because vue does not advocate modifying the value of the parent component in the child component, it will be a troublesome step if you want to do this. And I just need such an operation, so I checked the information.
First, let’s go to the code of the parent component , referencing the exp-group subcomponent

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

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

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

Next I want to change it in the subcomponent To pass the values ​​of these two properties to the parent component, you must first define them in the child component

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

First of all, if you want to modify the grpVisible property of the ordinary type, you need to define a variable and copy the grpVisible value to this variable, and then Modify this variable and pass it to the parent component. For details, see the code

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

The parent component receives this value through the parameter value of acceptData

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

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

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

Related recommendations:

How vue uses the tree control z- Add data dynamically to tree

#How does JavaScript use DOM to switch images?

The above is the detailed content of How to transfer values ​​​​between Vue parent and child components. For more information, please follow other related articles on the PHP Chinese website!