Wenn Sie mit Vue 2 vertraut sind, erinnern Sie sich vielleicht daran, dass die Vorlage jeder Komponente ein einzelnes Stammelement benötigte. In Vue 3 ist das aufgrund von Fragmenten nicht mehr notwendig. Das bedeutet, dass Ihre Komponenten jetzt mehrere Stammelemente haben können, ohne dass ein Wrapper erforderlich ist.
<!-- Vue 2 --> <template> <div> <!-- wrapper ? --> <h1>My Blog Post</h1> <ArticleComponent>{{ content }}</ArticleComponent> </div> </template> <!-- Vue 3 --> <template> <h1>My Blog Post</h1> <ArticleComponent>{{ content }}</ArticleComponent> </template>
Das ist Fragment in React sehr ähnlich. Allerdings verarbeitet Vue Fragmente hinter den Kulissen. Tatsächlich können Sie in Vue 3 an die Tag als Fragment.
In Vue 2 könnten wir problemlos einen Verweis auf eine untergeordnete Komponente setzen, der sich sowohl auf das Wrapper-Element als auch auf die Komponenteninstanz bezieht.
Aber worauf bezieht sich der Verweis in Vue 3, wenn es kein Wrapper-Element gibt? ?
Wenn die untergeordnete Komponente die Options-API verwendet oder nicht verwendet, verweist der Verweis auf dies der untergeordneten Komponente und gibt dem übergeordneten Element vollen Zugriff darauf seine Eigenschaften und Methoden.
Was wäre, wenn wir verwenden?
Komponenten, die verwenden, sind standardmäßig privat. Um Eigenschaften verfügbar zu machen, müssen wir das Makro defineExpose verwenden.
<!-- Child --> <template> <div>
<!-- Child --> <template> <h1>My Blog Post</h1> <!-- Root 1 --> <ArticleComponent>{{ content }}</ArticleComponent> <!-- Root 2 --> </template> <!-- Parent --> <script setup lang="ts"> const childRef = ref() onMounted(()=>{ console.log(childRef.value.$el); // #text }) </script> <template> <Child ref="childRef" /> </template>
Warte, was, was ist passiert?
Wenn wir Fragment (mehrere Knoten) verwenden, erstellt Vue einen Textknoten, der die Stammknoten unserer untergeordneten Komponenten umschließt.
Bei der Verwendung von Fragmenten in Vue 3 fügt Vue am Anfang der Komponente einen leeren Textknoten als Markierung ein, weshalb $el einen #text-Knoten zurückgibt.
#text ist wie ein Referenzpunkt, den Vue intern verwendet.
Außerdem sollte ich erwähnen, dass Sie weiterhin Zugriff auf die Komponenteninstanz haben (wenn Sie