Construire une pile de production : Docker, Meilisearch, NGINX et NestJS

Introduction

Si vous êtes habitué à Vue 2, vous vous souviendrez peut-être que le modèle de chaque composant nécessitait un seul élément racine. Dans Vue 3, ce n'est plus nécessaire à cause des fragments. Cela signifie que vos composants peuvent désormais avoir plusieurs éléments racine sans avoir besoin d'un wrapper.

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

C'est très similaire à Fragment dans React. Cependant, Vue gère les fragments en coulisses. En fait, dans Vue 3, vous pouvez penser au

Le problème ref()

Dans Vue 2, nous pourrions facilement définir une référence sur un composant enfant, et elle ferait référence à la fois à l'élément wrapper et à l'instance de composant.

Mais dans Vue 3, quand il n’y a pas d’élément wrapper, à quoi fait référence la référence ? ?

Si le composant enfant utilise l'API Options ou n'utilise pas , la référence pointera vers this du composant enfant, donnant au parent un accès complet à ses propriétés et méthodes.

Et si on utilisait ?

Les composants utilisant sont privés par défaut. Pour exposer les propriétés, nous devons utiliser la macro definitionExpose.

Accès à l'élément pour enfants

• Voici ce qui se passe lorsque vous avez un élément wrapper (racine unique) :

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

Attendez, quoi, que s'est-il passé ?

Lorsque nous utilisons Fragment (nœuds multiples), Vue crée un nœud de texte qui enveloppe les nœuds racine de nos composants enfants.

Lors de l'utilisation de Fragments dans Vue 3, Vue insère un nœud de texte vide au début du composant comme marqueur, c'est pourquoi $el renvoie un nœud #text.

#text est comme un point de référence que Vue utilise en interne.

Je dois également mentionner que vous avez toujours accès à l'instance du composant (si vous n'utilisez pas

Solution

1) Utilisez une racine unique comme celle-ci
2) Utilisez les références de modèle définirExpose

Utilisation des références de modèle

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

Vous avez maintenant accès à vos références et à tout ce que vous avez exposé en utilisant definitionExpose.