Les Références de Template

Introduction#

Dans le développement d'applications Vue.js, il peut y avoir des cas où nous avons besoin d'accéder directement aux éléments DOM sous-jacents malgré le modèle de rendu déclaratif de Vue qui abstrait la plupart des opérations DOM. C'est là que les références de template entrent en jeu. Dans ce chapitre, nous allons explorer les références de template et comment les utiliser pour accéder aux éléments DOM de manière directe.

Références de Template#

Les références de template sont définies à l'aide de l'attribut spécial ref. Par exemple, pour obtenir une référence directe à un champ de saisie, nous pouvons utiliser la syntaxe suivante :

<template>
  <input ref="myInput">
</template>

Dans cet exemple, myInput est la référence de template que nous pouvons utiliser pour accéder à l'élément DOM correspondant.

Accès aux Références#

Pour accéder à une référence de template, nous devons utiliser la Composition API de Vue. Nous devons d'abord déclarer une référence avec le même nom dans notre script :

<script setup>
import { ref, onMounted } from 'vue'

const myInput = ref(null)

onMounted(() => {
  myInput.value.focus()
})
</script>

<template>
  <input ref="myInput" />
</template>

Dans cet exemple, nous utilisons la fonction ref pour déclarer une référence nommée myInput. Nous pouvons ensuite utiliser cette référence dans le bloc onMounted pour accéder à l'élément DOM correspondant et lui donner le focus.

#