So kommunizieren Sie zwischen übergeordneten und untergeordneten Komponenten in Vue

Mit der kontinuierlichen Weiterentwicklung von Front-End-Frameworks ist Vue.js für viele Entwickler zu einem der bevorzugten Frameworks geworden. Vue.js ist ein progressives JavaScript-Framework, das eine effiziente, flexible, äußerst zuverlässige und wartbare Entwicklungsmethode bietet. In Vue.js sind Komponenten ein wichtiges Konzept. Unabhängig davon, ob Sie komplexe Seiten implementieren oder komponentenbasierte Anwendungen erstellen, müssen Sie Komponenten verwenden, um diese zu implementieren.

In Vue.js können Komponenten in anderen Komponenten verschachtelt werden, um eine Eltern-Kind-Komponentenbeziehung zu bilden. Zu diesem Zeitpunkt müssen übergeordnete und untergeordnete Komponenten häufig miteinander kommunizieren, um eine komplexe Geschäftslogik abzuschließen. In diesem Artikel wird die Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue.js vorgestellt.

1. Einweg-Datenfluss

In Vue.js überträgt die übergeordnete Komponente Daten im Allgemeinen in Form eines unidirektionalen Datenflusses an die untergeordnete Komponente, d. h. die übergeordnete Komponente überträgt Daten an die untergeordnete Komponente props-Attribut und die untergeordnete Komponente kann diese Daten nicht direkt ändern.

Die übergeordnete Komponente übergibt Daten, indem sie Requisitenattribute für die untergeordnete Komponente definiert, wie unten gezeigt:

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

Empfangen Sie die von der übergeordneten Komponente über Requisiten in der untergeordneten Komponente übergebenen Daten, wie unten gezeigt:

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

Damit ist die übergeordnete Komponente fertig Der Prozess der Weitergabe von Daten an Unterkomponenten. Unterkomponenten können die empfangenen Daten für Rendering-Vorgänge verwenden, sie können die Daten jedoch nicht direkt ändern.

2. Unterkomponente übergibt Daten an übergeordnete Komponente

In Vue.js übergibt Unterkomponente Daten über benutzerdefinierte Ereignisse an übergeordnete Komponente. Die untergeordnete Komponente löst das Ereignis über die Methode $emit aus, und die übergeordnete Komponente lauscht, indem sie der untergeordneten Komponente die v-on-Direktive hinzufügt, um das Ereignis zu binden.

Definieren Sie beispielsweise eine Schaltfläche in der untergeordneten Komponente. Wenn auf die Schaltfläche geklickt wird, wird ein Ereignis ausgelöst und Daten werden über die Methode $emit an die übergeordnete Komponente übergeben, wie unten gezeigt:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

Verwenden Sie in der übergeordneten Komponente die v-on-Anweisung zum Binden des Ereignisses und zum Abhören der untergeordneten Komponente. Das von der Komponente ausgelöste Ereignis empfängt die von der untergeordneten Komponente übergebenen Daten, wie unten gezeigt:

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

Damit ist der Prozess der Datenübergabe von der untergeordneten Komponente abgeschlossen an die übergeordnete Komponente Die untergeordnete Komponente löst das Ereignis aus und übergibt die Daten über die Methode $emit, und die übergeordnete Komponente übergibt die v-on-Direktive an Ereignisse, um von Unterkomponenten übergebene Daten abzuhören und zu empfangen.

3. Verwenden Sie die Attribute $parent und $children

Zusätzlich zu den beiden oben genannten Methoden bietet Vue.js auch zwei Attribute, $parent und $children, um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu implementieren. Verwenden Sie die Eigenschaft „$parent“, um auf die Daten und Methoden der übergeordneten Komponente in der untergeordneten Komponente zuzugreifen, und verwenden Sie die Eigenschaft „$children“, um auf die Daten und Methoden der untergeordneten Komponente in der übergeordneten Komponente zuzugreifen.

Um beispielsweise auf die Daten und Methoden der übergeordneten Komponente in der untergeordneten Komponente zuzugreifen, wie unten gezeigt:

<template>
  <div>
    <button @click="getParentData">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 属性访问父组件的数据和方法
      console.log(this.$parent.count) // 访问父组件的 count 数据
      this.$parent.sayHello() // 调用父组件的 sayHello 方法
    }
  }
}
</script>

Um auf die Daten und Methoden der untergeordneten Komponente in der übergeordneten Komponente zuzugreifen, können Sie das Attribut $children verwenden. wie unten gezeigt:

<template>
  <div>
    <button @click="getChildData">获取子组件的数据</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 属性访问子组件的数据和方法
      console.log(this.$children[0].count) // 访问第一个子组件的 count 数据
      this.$children[0].sayHello() // 调用第一个子组件的 sayHello 方法
    }
  }
}
</script>

Die Verwendung der Attribute $parent und $children für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten entspricht jedoch nicht den Komponentenkommunikationsprinzipien von Vue.js und wird nicht für die häufige Verwendung empfohlen. Da dieser Ansatz die untergeordnete Komponente und die übergeordnete Komponente eng miteinander verbindet, wird es schwierig, den Code zu erweitern und zu verwalten.

Zusammenfassung

In Vue.js können Requisiten und $emit-Methoden verwendet werden, um einen unidirektionalen Datenfluss und eine bidirektionale Bindung zwischen übergeordneten Komponenten und untergeordneten Komponenten zu implementieren. Sie können auch die Attribute $parent und $children verwenden, um übergeordnete Komponenten zu implementieren -Kind-Komponenten. Unabhängig davon, welche Methode verwendet wird, muss immer die Erweiterung und Wartung der Komponentenkommunikation berücksichtigt werden, um eine enge Kopplung zu vermeiden und den Code dadurch einfacher, skalierbarer und wartbarer zu machen.

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