Können Requisiten Funktionen in Vue übergeben?

Requisiten können in Vue als Requisiten übergeben werden. Der Zweck besteht darin, von außen übergebene Daten zu empfangen Die Syntax lautet „export default {methods : {myFunction() {// ...}}};“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, Dell G3-Computer.

Requisitenübertragungsfunktion in Vue

Eine häufig gestellte Frage von Neulingen in Vue. Strings, Arrays, Zahlen und Objekte können als props übergeben werden. Aber kann man eine Funktion als props übergeben? props传递。但是你能把一个函数当作一个props来传递吗?

虽然可以将函数作为props

Obwohl es möglich ist, eine Funktion als props zu übergeben, ist dies keine gute Möglichkeit. Im Gegenteil, Vue verfügt über eine Funktion, die speziell zur Lösung dieses Problems entwickelt wurde. Schauen wir uns diese als Nächstes an.

Funktionen an Komponenten übergeben

Es ist relativ einfach, eine Funktion oder Methode abzurufen und sie als Requisite an eine untergeordnete Komponente zu übergeben. Tatsächlich funktioniert es genauso wie die Übergabe jeder anderen Variablen:

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

Wie bereits erwähnt, sollten Sie so etwas in Vue niemals tun.

Warum? Vue hat etwas Besseres.

React vs Vue

Wenn Sie React verwendet haben, sind Sie es gewohnt, Funktionen zu übergeben.

In React können wir eine Funktion von der übergeordneten Komponente an die untergeordnete Komponente übergeben, sodass die untergeordnete Komponente nach oben mit der übergeordneten Komponente kommunizieren kann. Requisiten und Daten fließen nach unten, Funktionsaufrufe fließen nach oben.

Vue verfügt jedoch über einen anderen Mechanismus zur Implementierung der Kind-Eltern-Kommunikation: Vue verwendet Ereignisse.

Dies ist die gleiche Funktionsweise des DOM – die Vorgehensweise von Vue ist mit Browsern konsistenter als die von React. Elemente können Ereignisse aussenden und diese Ereignisse abhören.

Obwohl es in Vue möglich ist, Funktionen als Requisiten zu übergeben, wird dies als Anti-Pattern betrachtet.

Verwenden von Ereignissen

Über Ereignisse kommunizieren wir mit übergeordneten Komponenten in Vue.

Hier ist ein kurzes Beispiel, wie Events funktionieren.

Zuerst erstellen wir die untergeordnete Komponente, die bei ihrer Erstellung ein Ereignis ausgibt:

// ChildComponent
export default {
  created() {
    this.$emit('created');
  }
}

In der übergeordneten Komponente hören wir auf das Ereignis:

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log(&#39;Child has been created.&#39;);
    }
  }
};

Es gibt noch viel mehr Dinge, die man mit Ereignissen machen kann, und das ist nur Pelz. Es wird dringend empfohlen, sich die offizielle Vue-Dokumentation anzusehen, um mehr darüber zu erfahren. Sie ist auf jeden Fall eine Lektüre wert.

Aber Ereignisse können nicht alle unsere Probleme vollständig lösen.

Zugriff auf Daten im Bereich der übergeordneten Komponente von der untergeordneten Komponente aus

In vielen Fällen besteht das Problem, das wir zu lösen versuchen, darin, auf Daten aus verschiedenen Bereichen zuzugreifen.

Die übergeordnete Komponente hat einen Bereich und die untergeordnete Komponente hat einen anderen Bereich.

Normalerweise möchten wir von der übergeordneten Komponente aus auf den Wert in der untergeordneten Komponente zugreifen oder von der untergeordneten Komponente auf den Wert in der übergeordneten Komponente. Vue verhindert, dass wir dies direkt tun, was gut ist.

Dadurch werden unsere Komponenten besser gekapselt und ihre Wiederverwendbarkeit erhöht. Dies macht unseren Code sauberer und vermeidet auf lange Sicht viele Kopfschmerzen.

Aber manchmal versuchen wir, dieses Problem durch Funktionen zu umgehen.

「Den Wert von der übergeordneten Klasse abrufen」

Wenn Sie möchten, dass die untergeordnete Komponente auf die Methode der übergeordneten Komponente zugreift, erscheint es einfach und unkompliziert, die Methode direkt als Requisite zu übergeben.

In der übergeordneten Komponente würden wir Folgendes tun:

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

In unserer untergeordneten Komponente verwenden Sie die übergebene Methode:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

Was wäre das Problem dabei?

Das ist nicht ganz falsch, aber es wäre in diesem Fall besser, Ereignisse zu nutzen.

Dann ruft die untergeordnete Komponente bei Bedarf die Funktion nicht auf, sondern gibt nur ein Ereignis aus. Die übergeordnete Komponente empfängt dann das Ereignis, ruft die Funktion auf und die Assembly aktualisiert die an die untergeordnete Komponente übergebene Requisite.

Dies ist eine bessere Möglichkeit, den gleichen Effekt zu erzielen.

In anderen Fällen möchten wir möglicherweise einen Wert von einem untergeordneten Element in das übergeordnete Element übertragen und verwenden hierfür eine Funktion.

Zum Beispiel könnten Sie dies tun. Die übergeordnete Funktion übernimmt den Wert der untergeordneten Funktion und verarbeitet ihn:

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

Aufruf der übergebenen Methode in der untergeordneten Komponente und Übergabe des Werts der untergeordneten Komponente als Parameter der Methode:

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

Das ist nicht ganz falsch, das zu tun ist machbar.

Es ist einfach nicht der beste Weg, dies in Vue zu tun. Stattdessen sind Veranstaltungen besser geeignet, das Problem zu lösen. Mit Ereignissen können wir genau das Gleiche erreichen

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log(&#39;From the child:&#39;, value);
    }
  }
}

In untergeordneten Komponenten geben wir Ereignisse aus:

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit('send-message', this.value);
  }
}

Ereignisse sind in Vue sehr nützlich, aber sie lösen unser Problem auch nicht zu 100 %. Manchmal müssen wir vom übergeordneten Element aus auf andere Weise auf den untergeordneten Bereich zugreifen.

Hierfür nutzen wir Scoped Slots!

Verwendung von Scope-Slots

Scope-Slots sind ein fortgeschritteneres Thema, aber sie sind auch sehr nützlich. Tatsächlich denke ich, dass sie eine der leistungsstärksten Funktionen sind, die Vue zu bieten hat.

Sie schwächen die Grenze zwischen untergeordnetem und übergeordnetem Bereich. Aber es ist sehr sauber gemacht, sodass unsere Komponenten genauso zusammensetzbar sind wie zuvor.

Wenn Sie mehr über die Funktionsweise von Scope-Slots erfahren möchten, können Sie zuerst die offizielle Dokumentation lesen, oder wir erklären es Ihnen beim nächsten Mal. 🎜

【Verwandte Empfehlung: „vue.js Tutorial“】

Das obige ist der detaillierte Inhalt vonKönnen Requisiten Funktionen in Vue übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!