So übergeben Sie Werte zwischen übergeordneten und untergeordneten Vue-Komponenten

In diesem Artikel erfahren Sie, wie Sie Werte zwischen übergeordneten und untergeordneten Vue-Komponenten übertragen. Freunde in Not können sich darauf beziehen.

Hintergrund: Ich arbeite derzeit an einem Vue-Projekt, da die Logik der Seite relativ komplex und die Menge an Code groß ist, möchte ich einige Komponenten extrahieren und in die Komponente einfügen. Dann entsteht das Problem.
Da Vue nicht befürwortet, den Wert der übergeordneten Komponente in der untergeordneten Komponente zu ändern, ist dies ein mühsamer Schritt. Und ich brauchte nur einen solchen Vorgang, also habe ich die Informationen überprüft
Lass uns Beginnen Sie mit dem Code der übergeordneten Komponente und verweisen Sie auf die exp-group-Unterkomponente

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

grpVisible und grpData sind Attribute, die an die Unterkomponente übergeben werden, eines ist ein allgemeiner Typ und das andere ist ein Objekt

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

Als nächstes möchte ich es in der Unterkomponente ändern. Um die Werte dieser beiden Attribute an die übergeordnete Komponente zu übergeben, müssen Sie sie zunächst in der untergeordneten Komponente definieren

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

Erstens, wenn Sie grpVisible ändern möchten Attribut des gewöhnlichen Typs, Sie müssen eine Variable definieren und den grpVisible-Wert in diese Variable kopieren und dann diese Variable ändern und an die übergeordnete Komponente übergeben. Weitere Informationen finden Sie im Code

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

Die übergeordnete Komponente empfängt diesen Wert über den Parameterwert von AcceptData

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

Wenn es sich um ein Objekt handelt, müssen Sie es mit Object.assign kopieren. Weisen Sie den neuen Wert einer Variablen zu, ändern Sie dann die Variable und übergeben Sie sie an übergeordnete Komponente. Der Code lautet wie folgt:

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

Verwandte Empfehlungen:

Wie Vue die Baumsteuerung verwendet z- Daten dynamisch zum Baum hinzufügen

Wie nutzt JavaScript DOM, um Bilder zu wechseln?

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Werte zwischen übergeordneten und untergeordneten Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!