Detaillierte Erläuterung der SetupContext-Funktion in Vue3: Beherrschen Sie die Verwendung der Vue3-Komponenten-API

Mit der offiziellen Veröffentlichung von Vue3 können Vue.js-Entwickler mit der Entwicklung unter Verwendung der neuen Funktionen und API-Methoden beginnen. Unter anderem ist die SetupContext-Funktion eine wichtige API-Methode in Vue3 und bietet viele praktische Funktionen, damit wir Vue3-Komponenten besser schreiben können. In diesem Artikel werde ich die Verwendung der SetupContext-Funktion im Detail vorstellen.

1. Was ist die SetupContext-Funktion?

SetupContext-Funktion ist eine in Vue3 bereitgestellte API-Methode. Sie wird innerhalb der setup()-Funktion der Komponente aufgerufen. Diese Funktion gibt ein Objekt zurück, das die folgenden Eigenschaften enthält:

props: von der Komponente empfangene Requisitenparameter;
slots: Komponentenslots;
emit: benutzerdefinierte Ereignisse der Komponente.
Wir können Informationen wie Requisiten, Slots und benutzerdefinierte Ereignisse abrufen, die in der Komponente übergeben werden, indem wir die Funktion SetupContext einführen und in der Funktion setup() verwenden.

2. Props-Attribute

In Vue3 müssen wir die Props-Parameter, die in der detaillierten Konfiguration der Komponente verwendet werden müssen, nicht mehr deklarieren. Rufen Sie stattdessen in der Funktion setup() der Komponente die eingehenden Props-Parameter mithilfe des Props-Attributs ab.

Auf diese Weise müssen wir this.$props nicht mehr verwenden, um die übergebenen Props-Parameter wie in Vue2 zu erhalten. Zum Beispiel:

// Requisitenparameter in Vue2 abrufen

props: ['message'],
montiert() {
console.log(this.$props.message)
}

// Requisiten aus dem Requisitenattribut abrufen in Vue3-Parameter

setup(props) {
console.log(props.message)
}
In Vue3 wird das Abrufen der Props-Parameter selbst sehr einfach. In der setup()-Funktion der Komponente kann über das props-Attribut direkt auf die empfangenen props-Parameter zugegriffen werden.

Wenn der props-Parameter einer Komponente ein Objekt ist und alle seine Eigenschaften in der Funktion setup() verwendet werden müssen. Die Zuweisung kann mithilfe der destrukturierenden Syntax erfolgen. Zum Beispiel:

setup({ message, author }) {

console.log(message, author)

}

In diesem Beispiel verwenden wir Objektdestrukturierungssyntax, um die Nachrichten- und Autoreneigenschaften in Requisiten den Variablen message und author zuzuweisen.

Es ist zu beachten, dass der props-Parameter in Vue3 zu einem schreibgeschützten Attribut geworden ist und keine bidirektionale Bindung unterstützt. Wenn wir die Requisitenparameter ändern müssen, müssen wir über die Methode emit() Nachrichten an die übergeordnete Komponente senden.

3. Attrs-Attribut

Zusätzlich zum Props-Attribut enthält das SetupContext-Objekt auch das Attrs-Attribut. Diese Eigenschaft enthält alle undefinierten Eigenschaften in der Komponente. Zum Beispiel:

// Unsere Komponente ist wie folgt definiert:
props: {
message: String
},
setup(props, {attrs}) {

console.log(attrs.color) // 'red'

}

// Bei Verwendung der Komponente ein Farbattribut wird übergeben

In diesem Beispiel definieren wir eine example-component-Komponente und übergeben eine undefinierte Farbeigenschaft. Wenn wir die SetupContext-Funktion verwenden, können wir dieses undefinierte Attribut über das attrs-Attribut abrufen.

Es ist zu beachten, dass das Attribut attrs in Vue3 ebenfalls ein schreibgeschütztes Attribut ist und keine bidirektionale Bindung unterstützt.

4. Slots-Attribut

Vue3 bietet auch Slots-Attribute, die genau das gleiche wie Vue2 sind. Wir können das Slots-Attribut verwenden, um auf die in der Komponente übergebenen Slots zuzugreifen. Zum Beispiel:

// Unsere Komponente ist wie folgt definiert

setup(props, { slots }) {

console .log (slots.default())
}

// Bei Verwendung der Komponente werden zwei Textzeilen eingefügt

Die erste Textzeile< ;/p>

Zweite Textzeile

In diesem Beispiel definieren wir eine Beispielkomponentenkomponente und fügen sie in den Steckplatz darin ein. Zwei Zeilen von Text. In der Funktion setup() verwenden wir das Slots-Attribut, um auf diese beiden Textzeilen zuzugreifen.

Es ist zu beachten, dass Slots in Vue3 in Standard-Slots und benannte Slots unterteilt sind. Wenn Sie benannte Slots erhalten, müssen Sie diese daher über slots[name]() abrufen.

5. Die Emit-Methode

ist vollständig konsistent mit Vue2. Die Emit-Methode stellt die Funktion der Komponente bereit, Nachrichten an die übergeordnete Komponente zu übertragen. In Vue3 kann die emit-Methode auch in der Funktion setup() aufgerufen und über das in der Funktion setup() zurückgegebene Objekt aufgerufen werden. Zum Beispiel:

// Die übergeordnete Komponente ist wie folgt definiert

// Die untergeordnete Komponente ist wie folgt definiert

setup( _, { emit }) {

function handleClick() {
  emit('example-event', 'example data')
}
return {
  handleClick
}

}

In diesem Beispiel definieren wir eine handleClick-Methode, um das Ereignis example-event und die zugehörigen Datenbeispieldaten an die übergeordnete Komponente zu übergeben.

Es ist zu beachten, dass die Methode emit() in Vue3 zu einer schreibgeschützten Methode geworden ist und wir ihr Verhalten nicht ändern können.

6. Fazit

In diesem Artikel haben wir die SetupContext-Funktion in Vue3 und die darin enthaltenen Eigenschaften und Methoden ausführlich besprochen. Durch die Beherrschung dieser Vue.js 3-Funktionen und API-Methoden können wir Vue3-Komponenten flexibler schreiben und uns besser an verschiedene Geschäftsszenarien anpassen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der SetupContext-Funktion in Vue3: Beherrschen Sie die Verwendung der Vue3-Komponenten-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!