Was soll ich tun, wenn die Uniapp-Unterkomponente die Daten der übergeordneten Komponente nicht abrufen kann?

Bei der Entwicklung kleiner Programme oder H5-Anwendungen mit uniapp stoßen wir häufig auf Situationen, in denen die untergeordnete Komponente die Daten der übergeordneten Komponente abrufen muss. Manchmal stellen wir jedoch fest, dass der js-Code in der untergeordneten Komponente die übergebenen Daten nicht abrufen kann die übergeordnete Komponente. Dies liegt daran, dass untergeordnete Komponenten in Vue nicht direkt auf die Daten in der übergeordneten Komponente zugreifen können. Wie lösen wir dieses Problem? Im Folgenden finden Sie in diesem Artikel einige Lösungen, die Ihnen dabei helfen, dieses Problem während des Entwicklungsprozesses reibungslos zu lösen.

1. Verwenden Sie Requisiten, um Daten zu übergeben

In Vue werden Daten über Requisiten (Eigenschaften) an untergeordnete Komponenten übergeben, sodass untergeordnete Komponenten die von der übergeordneten Komponente übergebenen Daten verwenden können. Wir können einen Wert in der übergeordneten Komponente definieren und ihn dann an die untergeordnete Komponente binden, sodass die untergeordnete Komponente den Wert lesen kann. Das Folgende ist der Beispielcode:

Übergeordnete Komponente:

<template>
  <div>
    <child-component :parentData="parentData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>{{parentData}}</div>
</template>
<script>
export default {
  props: {
    parentData: String
  }
}
</script>

Die Weitergabe von Daten über Requisiten ist die am häufigsten verwendete Methode in Vue. Manchmal stoßen wir jedoch auf besondere Situationen, z. B. wenn eine untergeordnete Komponente Daten abrufen muss, bevor die übergeordnete Komponente geladen wird. Zu diesem Zeitpunkt müssen wir eine andere Methode verwenden.

2. Verwenden Sie $parent, um die Instanz der übergeordneten Komponente abzurufen.

Vue stellt das Attribut $parent bereit, mit dem die Instanz der übergeordneten Komponente abgerufen werden kann. Über diese Instanz können wir die Daten der übergeordneten Komponente direkt aufrufen. Das Folgende ist der Beispielcode:

Übergeordnete Komponente:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: '来自父组件的数据'
    }
  },
  mounted() {
    this.$refs.child.printParentData()
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>子组件</div>
</template>
<script>
export default {
  methods: {
    printParentData() {
      console.log(this.$parent.parentData)
    }
  }
}
</script>

Im obigen Code haben wir die übergeordnete Komponenteninstanz über $parent abgerufen, dann die parentData-Daten in der Instanz aufgerufen und schließlich erfolgreich abgerufen übergeordnete Daten in der Komponente.

Es ist zu beachten, dass bei unsachgemäßer Verwendung dieser Methode einige Kopplungsprobleme auftreten können. Daher müssen Sie bei der Verwendung die spezifischen Szenarien berücksichtigen und die Vor- und Nachteile abwägen.

3. Verwenden Sie $emit, um übergeordnete Komponentenereignisse auszulösen

Zusätzlich zur Verwendung von props und $parent zum Abrufen von übergeordneten Komponentendaten können wir auch übergeordnete Komponentenereignisse über $emit auslösen, um Daten zu übergeben. Der spezifische Implementierungsprozess ist wie folgt:

Übergeordnete Komponente:

<template>
  <div>
    <child-component @getChildData="getChildData"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    getChildData(data) {
      this.parentData = data
    }
  }
}
</script>

Untergeordnete Komponente:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('getChildData', '来自子组件的数据')
    }
  }
}
</script>

Im obigen Code haben wir über $emit ein Ereignis namens getChildData ausgelöst und die Daten übergeben, die in der untergeordneten Komponente übergeben werden müssen bis in der übergeordneten Komponente. In der übergeordneten Komponente binden wir das Ereignis @getChildData, um die von der untergeordneten Komponente übergebenen Daten zu akzeptieren und in parentData zu speichern.

Der Ereignisname zum Empfangen von Daten kann vom Entwickler definiert werden. Stellen Sie einfach sicher, dass die Ereignisnamen der untergeordneten Komponente und der übergeordneten Komponente konsistent sind.

Das Obige ist die Lösung für das Problem, dass die Uniapp-Unterkomponente js die Daten der übergeordneten Komponente nicht abrufen kann. In verschiedenen Szenarien können wir unterschiedliche Wege wählen, um dieses Problem zu lösen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn die Uniapp-Unterkomponente die Daten der übergeordneten Komponente nicht abrufen kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!