Wie verwende ich $parent und $children für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue?

Wie verwende ich $parent und $children für die Kommunikation zwischen Eltern-Kind-Komponenten in Vue?

In Vue sind Komponenten die Grundeinheit für die Erstellung von Anwendungen. Im Entwicklungsprozess ist die Kommunikation zwischen Komponenten eine sehr häufige Anforderung. Vue bietet einige integrierte Methoden zur Implementierung der Kommunikation zwischen Komponenten, einschließlich $parent und $children.

$parent bezieht sich auf die übergeordnete Komponente der aktuellen Komponente und $children bezieht sich auf alle untergeordneten Komponenten der aktuellen Komponente. Über sie können wir Daten übergeben und Methoden zwischen übergeordneten und untergeordneten Komponenten aufrufen.

Als nächstes werden wir anhand eines einfachen Beispiels demonstrieren, wie $parent und $children für die Kommunikation zwischen Eltern-Kind-Komponenten verwendet werden.

Zuerst müssen wir eine übergeordnete Komponente und eine untergeordnete Komponente erstellen. In der übergeordneten Komponente erstellen wir eine Dateneigenschaft und übergeben sie an die untergeordnete Komponente. Die untergeordnete Komponente ändert diese Daten und gibt die geänderten Daten an die übergeordnete Komponente zurück.

Der Code der übergeordneten Komponente lautet wie folgt:

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

In der übergeordneten Komponente übergeben wir die Daten der übergeordneten Komponente parentData an die untergeordnete Komponente ChildComponent und übergeben @changeHören Sie auf das change-Ereignis der untergeordneten Komponente. Wenn sich die Daten der untergeordneten Komponente ändern, werden die Daten der übergeordneten Komponente über handleChange-Methode. <code>parentData传递给子组件ChildComponent，并通过@change监听子组件的change事件，当子组件的数据发生变化时，将通过handleChange方法更新父组件的数据。

接下来，我们来看一下子组件的代码：

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

在子组件中，我们接收父组件传递过来的数据childData作为props，并渲染到页面上。当点击按钮时，通过handleClick方法修改子组件的数据，然后通过$emit方法触发change

Als nächstes werfen wir einen Blick auf den Code der untergeordneten Komponente:

rrreee

In der untergeordneten Komponente empfangen wir die von der übergeordneten Komponente als Requisiten übergebenen Daten childData und rendern sie auf der Seite. Wenn auf die Schaltfläche geklickt wird, werden die Daten der Unterkomponente über die Methode handleClick geändert und anschließend wird das Ereignis change über $emit ausgelöst -Methode und die geänderten Daten werden an die übergeordnete Komponente übergeben.

Zu diesem Zeitpunkt haben wir die Datenübertragung und Kommunikation zwischen übergeordneten und untergeordneten Komponenten abgeschlossen. Wenn wir die übergeordnete Komponente auf der Seite rendern, können wir sehen, dass die Daten der übergeordneten Komponente und die Daten der untergeordneten Komponente korrekt angezeigt werden. Wenn Sie auf die Schaltfläche in der untergeordneten Komponente klicken, werden die Daten der übergeordneten Komponente angezeigt entsprechend geändert. 🎜🎜Anhand der obigen Beispiele können wir sehen, dass mit $parent und $children problemlos Daten zwischen übergeordneten und untergeordneten Komponenten übertragen und kommuniziert werden können. Aufgrund der gewissen Kopplung zwischen übergeordneten und untergeordneten Komponenten müssen wir im tatsächlichen Entwicklungsprozess jedoch die geeignete Kommunikationsmethode basierend auf spezifischen Anforderungen und Szenarien auswählen. 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich $parent und $children für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!