Besprechen Sie die Methode zum Aufrufen von Eltern-Kind-Methoden in Vue

Vue ist ein sehr häufig verwendetes JavaScript-Framework. Es erstellt Benutzeroberflächen auf komponentenbasierte Weise, und in diesem Prozess ist die Kommunikation zwischen Komponenten sehr wichtig. In Vue kann die Kommunikation zwischen übergeordneten und untergeordneten Komponenten durch Requisiten und Ereignisse erreicht werden. In diesem Artikel wird untersucht, wie Eltern-Kind-Methodenaufrufe in Vue durchgeführt werden.

In Vue kann die Kommunikation zwischen übergeordneten und untergeordneten Komponenten durch Requisiten und Ereignisse erreicht werden. Props ist ein Attribut, das eine Methode zum Übergeben von Daten von der übergeordneten Komponente an die untergeordnete Komponente darstellt. Ereignisse sind ein Ereignis, bei dem es sich um eine Methode zum Senden von Nachrichten von untergeordneten Komponenten an übergeordnete Komponenten handelt.

Im Folgenden zeigen wir anhand eines Beispiels, wie man Eltern-Kind-Methoden in Vue aufruft. Zuerst erstellen wir eine neue Unterkomponente mit dem Namen „child.vue“:

<template>
  <div>
    <button @click="onClickButton">点击调用父组件方法</button>
  </div>
</template>

<script>
  export default {
    methods: {
      onClickButton() {
      this.$emit('callParentFunc')
      }
    }
  }
</script>

In der Unterkomponente definieren wir eine Schaltfläche und binden ein Klickereignis. Wenn auf die Schaltfläche geklickt wird, lösen wir über this.$emit ein Ereignis callParentFunc aus und übergeben einen leeren Parameter. Auf diese Weise sendet die untergeordnete Komponente eine Nachricht und die übergeordnete Komponente kann die Methode der untergeordneten Komponente aufrufen, indem sie dieses Ereignis abhört.

Als nächstes empfangen wir dieses Ereignis in der übergeordneten Komponente und rufen die Methode der untergeordneten Komponente auf. In der übergeordneten Komponente verwenden wir die untergeordnete Komponente in der Vorlage und hören auf ihr callParentFunc-Ereignis und binden eine onChildClick-Methode:

<template>
  <div>
    <h2>我是父组件</h2>
    <Child @callParentFunc="onChildClick"/>
  </div>
</template>

<script>
  import Child from './child.vue'
  export default {
    components:{Child},
    methods: {
      onChildClick() {
        console.log("调用子组件方法")
      }
    }
  }
</script>

Sie können sehen, dass wir die untergeordnete Komponente in der Vorlage verwenden und auf das callParentFunc-Ereignis der untergeordneten Komponente hören. Gleichzeitig wird in Methoden eine onChildClick-Methode definiert. Wir können diese Methode ausführen, wenn die untergeordnete Komponente eine Nachricht an die übergeordnete Komponente sendet.

Zusammenfassung: Durch die Einleitung dieses Artikels verstehen wir die Art und Weise, wie die Eltern-Kind-Methode in Vue aufgerufen wird, das heißt, die untergeordnete Komponente löst dadurch ein Ereignis aus.$emit und sendet eine Nachricht nach außen, und Die übergeordnete Komponente überwacht dieses Ereignis. Sie können jetzt Methoden in untergeordneten Komponenten aufrufen. Diese Methode ist eine sehr einfache und praktische Möglichkeit zur Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue.

Das obige ist der detaillierte Inhalt vonBesprechen Sie die Methode zum Aufrufen von Eltern-Kind-Methoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!