So übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente

Methoden für Vue-Unterkomponenten zum Übergeben von Werten an übergeordnete Komponenten: 1. Die Unterkomponente löst aktiv Ereignisse aus, um Daten an die übergeordnete Komponente zu übergeben. 2. Binden Sie die Referenz an die Unterkomponente und definieren Sie eine Funktion, die die übergeordnete Komponente direkt aufrufen kann. Die übergeordnete Komponente registriert die Unterkomponente, bindet dann die Referenz und ruft die Funktion der Unterkomponente auf, um Daten abzurufen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Zunächst löst die Unterkomponente das Ereignis aktiv aus und übergibt die Daten an die übergeordnete Komponente

1. Binden Sie ein Ereignis und die durch das Ereignis ausgelöste Funktion an die Unterkomponente

Unterkomponentencode

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>

<Button type="success" @click="submit"></Button>
</div>
  
</template>

Das Ereignis wird in der Unterkomponentenfunktion

      submit(){
        this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
      },

2 ausgelöst, binden Sie das Triggerereignis in der übergeordneten Komponente

<AuthTree  @getTreeData=&#39;testData&#39;>
</AuthTree>

Die Triggerfunktion der übergeordneten Komponente zeigt die von der untergeordneten Komponente übergebenen Daten an

testData(data){
      console.log("parent");
      console.log(data)
    },

Die von der Konsole gedruckten Daten

Zweitens besteht keine Notwendigkeit, in der untergeordneten Komponente Ereignisse auszulösen (z. B. Schaltflächenklicks, create()-Ereignisse usw.).

Dieser Weg ist viel einfacher,

1

in der Unterkomponente und definieren Sie dann eine Funktion in der Unterkomponente. Diese Funktion kann direkt aufgerufen werden. Der Rückgabewert der Funktion ist als die von uns benötigten Daten definiert.

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>
  
</template>

Dann registrieren Sie die untergeordnete Komponente bei der übergeordneten Komponente, binden Sie die Referenz und rufen Sie die Funktion der untergeordneten Komponente auf, um die Daten abzurufen

getData(){
        return this.$refs.treeData.getCheckedNodes()
    },

Der Funktionsaufruf der übergeordneten Komponente

<AuthTree ref="authTree">
          </AuthTree>

Verwandte Empfehlungen: „

vue.js-Tutorial „

Das obige ist der detaillierte Inhalt vonSo übergeben Sie einen Wert von der Vue-Unterkomponente an die übergeordnete Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!