fonction refs dans Vue3 : accès direct aux instances de composants

Fonction refs dans Vue3 : accès direct aux instances de composants

Dans Vue3, une nouvelle fonction appelée refs a été ajoutée, qui peut accéder directement aux instances de composants, offrant aux développeurs une méthode de développement plus pratique. Dans cet article, nous allons approfondir la fonction refs dans Vue3 pour comprendre comment l'utiliser et sa valeur pour le développement de composants.

Méthode de référence Vue2

Dans Vue2, nous pouvons utiliser $refs pour référencer des composants ou des éléments. Par exemple, nous pouvons obtenir une instance de composant via le code suivant : #🎜🎜. #

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myComponentRef)
  }
}
</script>

Dans le hook monté, nous accédons à l'instance du composant via this.$refs.myComponentRef, ce qui facilite dans une certaine mesure notre fonctionnement du composant. Cependant, dans Vue2, $refs présente les problèmes suivants :

Étant donné que $refs est attribué dans le hook monté, si le composant est utilisé immédiatement après le rendu, le composant risque de ne pas être trouvé. Exemple.
1. Puisque $refs n'est qu'un simple objet, lorsque nous voulons écouter les événements ou les méthodes du composant, nous devons le lier manuellement dans le hook monté.
2. Lorsque les composants sont imbriqués, si vous utilisez $refs pour accéder à l'instance du composant petit-enfant, vous devez effectuer des opérations récursives sur $refs.

La méthode de référence de Vue3

Par rapport à Vue2, la nouvelle fonction refs de Vue3 optimise la méthode de référence des composants. En utilisant la fonction refs, vous pouvez accéder directement à l'instance du composant sans utiliser $refs, évitant ainsi les problèmes de Vue2.

Nous pouvons obtenir une instance de composant grâce au code suivant :

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const myComponentRef = ref(null)
    return {
      myComponentRef
    }
  },
  mounted() {
    console.log(this.myComponentRef)
  }
}
</script>

Dans Vue3, nous utilisons la fonction ref pour transformer myCompomentRef en une variable réactive. Un objet contenant myComponentRef est renvoyé dans le hook de configuration et exposé au composant. Dans le hook monté, nous pouvons accéder directement à l'instance du composant via this.myComponentRef.

Si nous avons besoin d'accéder à l'instance du composant petit-enfant, nous pouvons également le faire directement via la fonction refs :

<template>
  <div>
    <parent-component ref="parentComponentRef"></parent-component>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const parentComponentRef = ref(null)
    return {
      parentComponentRef
    }
  },
  mounted() {
    console.log(this.parentComponentRef.value.$refs.childComponentRef)
  }
}
</script>

Dans cet exemple, nous utilisons la fonction refs pour obtenir le instance du composant parent. Dans le hook monté, nous pouvons accéder à l'instance du composant petit-enfant via this.parentComponentRef.value.$refs.childComponentRef.

Summary

Dans Vue3, la fonction refs fournit un moyen plus intuitif et plus pratique d'accéder aux instances de composants, évitant ainsi les problèmes qui existent dans Vue2. C'est également l'une des nouveautés de Vue3, et il est recommandé aux développeurs de la maîtriser. En plus de l'utiliser dans le setup hook, nous pouvons également l'utiliser dans un modèle, par exemple :

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="() => myComponentRef.value.update()">update</button>
  </div>
</template>

Dans cet exemple, nous lions un événement de clic, et lorsque l'on clique sur le bouton, myComponentRef.value est appelée la méthode update(), afin que nous n'ayons pas besoin de lier manuellement les événements dans le hook monté.

Enfin, j'espère que cet article pourra être utile pour l'utilisation de la fonction refs dans Vue3, et pourra également fournir quelques idées et références aux développeurs Vue3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!