Aufbau eines Produktionsstapels: Docker, Meilisearch, NGINX und NestJS

Einführung

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 id="My-Blog-Post">My Blog Post</h1>
    <articlecomponent>{{ content }}</articlecomponent>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <h1 id="My-Blog-Post">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

Das ref()-Problem

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.

Zugang zum Kinderelement

• Das passiert, wenn Sie ein Wrapper-Element (einzelnes Stammelement) haben:

<!-- Child -->
<template>
  <div>



<ul>
<li>And when you have more than one root:
</li>
</ul>

<pre class="brush:php;toolbar:false"><!-- Child -->
<template>
  <h1 id="My-Blog-Post">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"></child>
</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

Lösung

1) Verwenden Sie Single Root wie folgt
2) Verwenden Sie Template Refs defineExpose

Verwenden von Template-Refs defineExpose

<!-- Child -->
<script setup lang="ts">
import { ref } from 'vue';

const h1Ref = ref()
const articleRef = ref()


defineExpose({
  h1Ref,
  articleRef
})
</script>

<template>
  <h1 id="My-Blog-Post">My Blog Post</h1> 
  <articlecomponent ref="articleRef">{{ content }}</articlecomponent> 
</template>



<!-- Parent -->
<script setup lang="ts">
const childRef = ref()

onMounted(()=>{
  console.log(childRef.value); 
  //  {h1Ref: RefImpl, articleRef: RefImpl}
})
</script>

<template>
  <child ref="childRef"></child>
</template>

Jetzt haben Sie Zugriff auf Ihre Referenzen und alle Dinge, die Sie mithilfe von defineExpose offengelegt haben.