Methodenfunktionen in Vue3: Beherrschen Sie die Kommunikationsmethode zwischen Vue3-Komponenten

Vue3 ist derzeit eines der beliebtesten Frontend-Frameworks. Es wird für seine leistungsstarken Funktionen und die einfache und benutzerfreundliche API hoch gelobt. Vue3 bietet viele Möglichkeiten zur Organisation und Interaktion mit verschiedenen Komponenten, einschließlich Kommunikation zwischen Komponenten, Zustandsverwaltung, dynamischen Komponenten usw. In Vue3 können wir einige Methodenfunktionen verwenden, um die Kommunikation zwischen Komponenten zu implementieren. Lassen Sie uns diese Methoden beherrschen.

1. props

props ist eine wichtige Funktion von Vue3. Es ist eine Möglichkeit, die Eigenschaften von Komponenten zu definieren und Daten zu übertragen. Wenn Sie Daten von einer Komponente an ihre untergeordneten Komponenten übergeben müssen, können Sie Requisiten verwenden. Sie können in der Option props in der untergeordneten Komponente ein Array angeben, das die Eigenschaften enthält, die Sie akzeptieren möchten. Wenn Sie Eigenschaften von einer übergeordneten Komponente übergeben, werden diese Eigenschaften automatisch an die untergeordnete Komponente übergeben und sind dort verfügbar. Das Folgende ist ein einfaches Beispiel:

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

In der Child-Komponente können wir Daten über Requisiten empfangen:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Beachten Sie, dass der Typ jedes Attributs in der Props-Option angegeben werden muss, damit sichergestellt werden kann, dass dies der Fall ist an die untergeordnete Komponente übergeben. Der Datentyp ist korrekt.

2. emit

emit ist eine weitere häufig verwendete Methode zur Kommunikation zwischen Komponenten in Vue3. Wenn Sie ein Ereignis in einer untergeordneten Komponente auslösen müssen, können Sie die Methode „emit“ verwenden. In der übergeordneten Komponente können Sie dieses Ereignis abhören und einige Vorgänge ausführen. Hier ist ein einfaches Beispiel:

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

In der untergeordneten Komponente können wir $emit verwenden, um ein Ereignis auszulösen:

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

Wenn der Benutzer auf die Schaltfläche klickt, löst die untergeordnete Komponente ein Alarmereignis aus und leitet eine Nachricht an die übergeordnete Komponente weiter Mitte.

3. provide/inject

provide/inject ist eine weitere komponentenübergreifende Kommunikationsmethode, die von Vue3 bereitgestellt wird. Es unterscheidet sich geringfügig von props und emit, da es Ihnen ermöglicht, der untergeordneten Komponente einige Daten bereitzustellen. Untergeordnete Komponenten können diese Daten über die Injektionsoption empfangen. Das Folgende ist ein einfaches Beispiel:

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

In der Child-Komponente können wir die Option „inject“ verwenden, um diese Daten zu empfangen:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

Beachten Sie, dass der Name der Daten, die empfangen werden müssen, in der Option „inject“ angegeben ist Es kann direkt in der untergeordneten Komponente angezeigt werden. Verwenden Sie es.

4. $parent/$children

$parent und $children sind zwei weitere von Vue3 bereitgestellte Tools für die Kommunikation zwischen Komponenten. $parent wird von einer untergeordneten Komponente verwendet, um auf Eigenschaften oder Methoden in ihrer übergeordneten Komponente zuzugreifen, während $children von einer übergeordneten Komponente verwendet wird, um auf Eigenschaften oder Methoden in ihren untergeordneten Komponenten zuzugreifen. Da diese beiden Optionen in Vue3 bereitgestellt werden, werden sie in zukünftigen Versionen von Vue3 möglicherweise weggelassen.

5. $attrs/$listeners

$attrs und $listeners sind zwei erstaunliche Optionen, die von Vue3 bereitgestellt werden. Die Option $attrs stellt der Komponente alle an sie übergebenen Attribute zur Verfügung und sie können mit der Props-Option der untergeordneten Komponente wie folgt verwendet werden:

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

In der untergeordneten Komponente:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Im obigen Beispiel kann die untergeordnete Komponente verwenden die Option $attrs zum Empfangen und Definieren der entsprechenden Requisitenoptionen. Die Option

$listeners stellt der Komponente alle Ereignis-Listener in der übergeordneten Komponente zur Verfügung. Dadurch können Sie diese Ereignis-Listener in untergeordneten Komponenten verwenden. Wie unten gezeigt:

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

Wenn der Benutzer auf die Schaltfläche klickt, wird der Ereignis-Listener in der übergeordneten Komponente ausgelöst.

Zusammenfassung

Dieser Artikel listet die häufig verwendeten Methoden zur Kommunikation zwischen Komponenten in Vue3 auf. Zu diesen Methoden gehören: props, emit, Provide/inject, $parent/$children und $attrs/$listeners. Diese Methoden können Ihnen helfen, verschiedene Komponenten besser zu organisieren und mit ihnen zu interagieren, Ihre Entwicklungseffizienz zu verbessern und die Benutzererfahrung zu verbessern. In der Praxis müssen Sie möglicherweise mehrere Methoden gleichzeitig verwenden, um Ihre Geschäftsziele zu erreichen. Stellen Sie daher sicher, dass Sie die Optionen kennen und wissen, wann und wo sie anwendbar sind.

Das obige ist der detaillierte Inhalt vonMethodenfunktionen in Vue3: Beherrschen Sie die Kommunikationsmethode zwischen Vue3-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!