Quand vue doit-il ajouter une référence ?

Vue est un framework JavaScript populaire largement utilisé pour le développement front-end. Dans Vue, ref est une directive très utile qui peut être utilisée pour accéder à une référence à un composant ou un élément spécifique. Alors, quand devez-vous utiliser ref dans Vue ?

Dans Vue, la directive ref est généralement utilisée dans les scénarios suivants :

1. Accéder aux composants enfants

La directive ref est essentielle lorsque vous devez accéder aux propriétés et aux méthodes du composant enfant via l'instance du composant parent. . En utilisant la directive ref, vous pouvez créer une référence à un composant enfant, puis utiliser l'attribut $refs dans le composant parent pour accéder au composant enfant. Par exemple, en supposant que vous ayez un composant enfant appelé ChildComponent, vous pouvez utiliser le code suivant dans le modèle du composant parent pour créer une référence :

<template>
  <child-component ref="childComponent"></child-component>
</template>

Vous pouvez ensuite accéder au composant enfant dans le composant parent en utilisant le code suivant :

this.$refs.childComponent.methodName();

Parmi eux, methodName est le nom de la méthode définie dans le sous-composant.

2. Accéder aux éléments DOM

Dans certains cas, vous devrez peut-être accéder directement aux éléments DOM, par exemple en utilisant une bibliothèque tierce dans un composant Vue, ou vous devrez obtenir les propriétés d'un élément spécifique dans un composant Vue. . Pour ces situations, la directive ref est également très utile. Par exemple, si vous avez besoin d'obtenir l'attribut value d'un élément spécifique, vous pouvez utiliser le code suivant dans le modèle :

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

Ensuite, vous pouvez utiliser le code suivant dans le composant Vue pour obtenir l'attribut value de l'élément :

const value = this.$refs.myInput.value;

3. Accédez aux objets d'instance

Parfois, vous devrez peut-être accéder à l'objet d'instance lui-même dans un composant Vue, par exemple lorsque vous devez utiliser une API Vue spécifique. Dans ce cas, la directive ref peut vous aider à accéder facilement à l'objet instance Vue. Par exemple, si vous devez utiliser la méthode $emit dans un composant Vue pour déclencher un événement, vous pouvez utiliser le code suivant :

<template>
  <button @click="emitEvent">Click me</button>
</template>

<script>
  export default {
    methods: {
      emitEvent() {
        this.$emit('myEvent');
      }
    },
    mounted() {
      this.$refs.myComponent.$on('myEvent', () => {
         // Event triggered
      });
    }
  }
</script>

Dans ce cas, vous pouvez utiliser le code suivant dans le modèle pour créer une référence au Instance Vue :

<child-component ref="myComponent"></child-component>

Ensuite, dans la fonction hook montée, vous pouvez utiliser le code suivant pour accéder à l'instance Vue :

this.$refs.myComponent.$on('myEvent', () => {
   // Event triggered
});

En bref, la directive ref est très utile dans Vue et peut vous aider à accéder aux sous-composants, aux éléments DOM et Les instances Vue sont plus pratiques. Cependant, il convient de noter que vous devez éviter autant que possible d'abuser de la directive ref. Si possible, veuillez utiliser le mécanisme de liaison de données et d'événements de Vue et d'autres fonctions, qui sont plus conformes aux idées de conception de Vue.

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!