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

27b3b39f1f3dc2bbcec9683da32de1ea
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

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<slot></slot>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

setup(props, { slots }) {

console .log (slots.default())
}

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

663603caa420dd21dd2d2832ad3064aa
e388a4556c0f65e1904146cc1a846beeDie erste Textzeile< ;/p>
e388a4556c0f65e1904146cc1a846beeZweite Textzeile94b3e26ee717c64999d7867364b1b4a3
9711b247f42f43ca3168f4ff0acf0adf
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

4cbd4287dc694340504c2f232e73ffce

// 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!