4 Möglichkeiten für die Vue-Unterkomponente, die Daten ihrer übergeordneten Komponente abzurufen

In Vue-Komponenten können Sie Daten von der übergeordneten Komponente über das Props-Attribut empfangen und die Daten dann in der Komponente verwenden. Wenn die übergeordnete Komponente ihre Daten an die untergeordnete Komponente übergeben muss, können die Daten über Requisiten an die untergeordnete Komponente übergeben werden.

Wenn Sie die Daten der Seite abrufen möchten, die sie in der Unterkomponente verschachtelt, können Sie dies mit der Abhängigkeitsinjektionsfunktion von Vue erreichen. Durch die Abhängigkeitsinjektion können übergeordnete Komponenten einige globale Abhängigkeiten an untergeordnete Komponenten übergeben, darunter Daten, Methoden, Plugins und mehr. Untergeordnete Komponenten können auf die Daten ihrer übergeordneten Komponente zugreifen, indem sie auf die Eigenschaft $parent der übergeordneten Komponente zugreifen. Diese Methode ist jedoch nicht elegant und anfällig für die Komponentenhierarchie.

Hier ist eine elegantere Möglichkeit, die Abhängigkeitsinjektion von Vue zu verwenden, um Daten von der Seite abzurufen, auf der sie verschachtelt ist:

0, es ist üblich, this.$parent zu verwenden

this.$parent.someData

1. Definieren Sie ein globales Datenobjekt in der übergeordneten Komponente und speichern Sie die an die untergeordnete Komponente zu übergebenden Daten in diesem Objekt:

export default {
    
    
  data() {
    
    
    return {
    
    
      globalData: {
    
    
        // 要传递给子组件的数据
        someData: 'Hello world'
      }
    }
  }
}

2. Verwenden Sie in der Vorlage der übergeordneten Komponente das Provide-Attribut, um das globale Datenobjekt in die Komponenteninstanz einzufügen:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    
    
  components: {
    
    
    ChildComponent
  },
  data() {
    
    
    return {
    
    
      globalData: {
    
    
        // 要传递给子组件的数据
        someData: 'Hello world'
      }
    }
  },
  provide() {
    
    
    return {
    
    
      globalData: this.globalData
    }
  }
}
</script>

3. Verwenden Sie in der untergeordneten Komponente das Inject-Attribut, um das von der übergeordneten Komponente übergebene globale Datenobjekt einzufügen, und verwenden Sie dann die Daten in der untergeordneten Komponente:

<template>
  <div>
    <p>{
    
    {
    
     globalData.someData }}</p>
  </div>
</template>

<script>
export default {
    
    
  inject: ['globalData']
}
</script>

Im obigen Code verwendet die übergeordnete Komponente das Provide-Attribut, um das globale Datenobjekt in die Komponenteninstanz einzufügen. Die Unterkomponente verwendet das Inject-Attribut, um das von der übergeordneten Komponente übergebene globale Datenobjekt einzufügen. Anschließend kann über this.globalData in der Unterkomponente auf die Daten zugegriffen werden.

Es ist zu beachten, dass die Attribute „prove“ und „inject“ nur zum Übergeben von Daten von Vorgängerkomponenten an untergeordnete Komponenten verwendet werden können, nicht jedoch von untergeordneten Komponenten an übergeordnete Komponenten. Wenn Sie die Daten der übergeordneten Komponente in der untergeordneten Komponente ändern müssen, sollten Sie dazu das Ereignis und die Methode $emit verwenden.