Fonction Ref dans Vue3 : accès direct aux éléments du composant

fonction #ref dans Vue3 : accès direct aux éléments des composants

Vue est un framework JavaScript très populaire qui lie les données et les interfaces les unes aux autres, rendant le développement plus simple et plus efficace. Vue3 est la dernière version du framework Vue, apportant plus d'optimisations et de nouvelles fonctionnalités. L'une des nouveautés est la fonction ref, qui permet d'accéder directement aux éléments des composants, ce qui facilite grandement le développement.

Dans Vue2, nous devons généralement utiliser $refs pour obtenir les éléments des composants. Cependant, $refs présente certaines limites. Premièrement, les éléments de composant ne peuvent être obtenus qu'après le cycle de vie monté. Deuxièmement, si des composants dynamiques ou des instructions v-for sont utilisés, $refs deviendra peu fiable, ce qui limite considérablement la flexibilité du développement. La fonction ref de Vue3 résout ces problèmes. Elle nous permet d'accéder directement aux éléments des composants sans attendre le cycle de vie monté.

L'utilisation de la fonction ref est très simple, il suffit d'ajouter l'attribut ref à l'élément auquel il faut accéder. Par exemple, nous avons un composant bouton qui doit faire fonctionner d’autres composants via des événements de clic de bouton. Dans Vue2, nous devons obtenir le composant bouton via $refs dans le composant parent, mais dans Vue3, nous pouvons utiliser la fonction ref directement, comme indiqué ci-dessous :

<template>
  <div>
    <button @click="handleClick" ref="myButton">Click me</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const myButton = ref(null);

    function handleClick() {
      myButton.value.innerText = 'Button clicked';
    }

    return {
      myButton,
      handleClick,
    };
  },
};
</script>

Dans le code ci-dessus, nous utilisons ref fonction pour obtenir l’élément bouton et l’attribuer à la variable myButton. Dans l'événement handleClick, nous pouvons utiliser directement myButton.value pour accéder à l'élément bouton, afin de pouvoir facilement modifier les propriétés de l'élément.

Il est à noter que la fonction ref ne peut être utilisée que dans la fonction setup. La fonction de configuration est une nouvelle fonction de cycle de vie dans Vue3, qui est exécutée avant la création du composant et peut utiliser directement des données réactives et des API composées. Grâce à la fonction de configuration, nous pouvons accéder aux éléments avant la création du composant, ce qui est très utile pour utiliser des bibliothèques tierces ou intégrer Vue3 avec d'autres piles technologiques.

En plus d'accéder aux éléments HTML natifs, la fonction ref peut également être utilisée pour accéder aux instances de composants. Par exemple, nous avons un composant nommé myComponent et nous devons exploiter ses propriétés ou méthodes dans le composant parent. Dans Vue2, nous devons obtenir l'instance de myComponent via $refs, mais dans Vue3, nous pouvons utiliser la fonction ref directement, comme indiqué ci-dessous :

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
  </div>
</template>
<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
export default {
  components: {
    'my-component': MyComponent,
  },
  setup() {
    const myComponentRef = ref(null);

    function handleClick() {
      myComponentRef.value.myMethod();
    }

    return {
      myComponentRef,
      handleClick,
    };
  },
};
</script>

Dans le code ci-dessus, nous utilisons la fonction ref Pour obtenez une instance du composant myComponent et affectez-la à la variable myComponentRef. Dans l'événement handleClick, nous pouvons utiliser directement myComponentRef.value pour accéder aux propriétés et méthodes de l'instance du composant, afin de pouvoir facilement utiliser le composant.

En bref, la fonction ref est une fonctionnalité très pratique dans Vue3. Elle nous permet d'accéder directement aux éléments et aux instances des composants, rendant le développement plus flexible et efficace. Si vous apprenez Vue3 ou si vous vous préparez à mettre à niveau votre projet Vue2 vers Vue3, assurez-vous de ne pas manquer cette fonction puissante.

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!