Que signifie ref en vue

La directive ref dans Vue est utilisée pour obtenir une référence à un élément ou un composant DOM afin de l'utiliser et d'interagir avec lui. L'utilisation spécifique inclut la référence de chaîne et la référence de fonction, et ses fonctions incluent l'accès direct au DOM, l'accès aux instances de composants, la gestion des données de formulaire et la mise en œuvre d'instructions personnalisées.

La signification de ref dans Vue

Dans Vue, ref est une instruction utilisée pour obtenir une référence à un élément ou un composant DOM. En utilisant ref, vous pouvez obtenir le nœud DOM ou l'instance Vue d'un élément ou d'un composant afin de pouvoir opérer dessus.

Utilisation

Il existe deux façons d'utiliser ref :

• String ref : Utilisez la directive v-ref pour utiliser une chaîne comme valeur de ref. Par exemple : <div v-ref="myRef">...</div><div v-ref="myRef">...</div>
• 函数 ref：使用 v-ref-function 指令，将函数作为 ref 的值。函数会在组件实例创建后调用，并接收 DOM 节点或 Vue 实例作为参数。例如：<div v-ref-function="myRef">...</div>

Function ref :

Utilisez la directive v-ref-function pour utiliser la fonction comme la valeur de la réf. La fonction est appelée après la création de l'instance du composant et reçoit un nœud DOM ou une instance Vue en tant que paramètre. Par exemple : <div v-ref-function="myRef">...</div> Accès direct au DOM : Vous pouvez accéder directement aux nœuds DOM et effectuer des opérations, telles que changer de style, ajouter des écouteurs d'événements, etc.

Accès aux instances de composants :

Vous pouvez accéder à d'autres instances de composants, appeler leurs méthodes ou accéder à leurs propriétés.

• Gérer les données du formulaire : Vous pouvez facilement obtenir ou définir des valeurs à partir de vos formulaires.
• Implémenter des directives personnalisées :Vous pouvez utiliser ref pour implémenter des directives personnalisées afin d'interagir avec le DOM ou les composants.
• Exemple
• L'exemple suivant montre comment utiliser les références dans Vue :

  <code class="javascript"><template>
    <div v-ref="myRef">Hello Vue!</div>
  </template>
  
  <script>
  export default {
    mounted() {
      // 访问 DOM 节点
      this.$refs.myRef.style.color = 'red';
  
      // 访问组件实例
      const otherComponent = this.$refs.otherComponent;
      otherComponent.greet();
    }
  }
  </script></code>

En utilisant les références, vous pouvez facilement interagir avec les éléments et composants DOM dans Vue, permettant des fonctionnalités plus riches.

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!