49 votes

Quel est le but réel de l'attribut 'ref'?

Je suis vraiment confus avec l'attribut "ref" de l'élément input. Je ne l'ai jamais entendu sur la base de mes connaissances et je ne trouve pas de matériel significatif à ce sujet. Le code est dans les documents officiels.

 <currency-input v-model="price"></currency-input>
 

C'est du code sur le composant:

 Vue.component('currency-input', {
  template: `
    <span>
      $
      <input
        ref="input"
        v-bind:value="value"
        v-on:input="updateValue($event.target.value)">
    </span>
  `,
  props: ['value'],
 

quelle est la signification de la valeur de l'attribut ref qui est égal à l'entrée?

59voto

Cobaltway Points 4346

Le but principal de l'attribut ref est de faire de l'élément DOM sélectionnable par être la clé dans le parent de l' $refs d'attribut.

Par exemple un élément d'entrée, avec ref="input", exposer ses nœuds du DOM dans son parent (ici à l'intérieur de monnaie d'entrée this), comme this.$refs["input"] (ou this.$refs.input).

Voir: https://vuejs.org/v2/api/#ref

Il a plusieurs cas d'utilisation, même si c'est souvent mieux quand il est possible de ne pas manipuler le DOM directement. Par exemple, un usage légitime cas ici est de mettre l'accent sur cette entrée: pour cela, vous pouvez utiliser this.$refs["input"].focus() dans une méthode de la composante...

16voto

Michael Manlulu Points 166
  • $refs est utilisé pour sélectionner/cible des éléments HTML
  • $refs , c'est comme l' document.querySelector('.el') à la vanille JS ou $('.el') en jQuery
  • $refs peut être consulté à l'intérieur ou à l'extérieur de votre VueJS instance.
  • $refs sont PAS RÉACTIFS à la différence de propriétés de données.

Ainsi, il est recommandé d'utiliser $refs lorsque vous voulez écouter/manipuler/modifier la valeur d'un élément qui n'est pas connecté/contrôlé à toute Vue des propriétés d'une instance pour éviter les conflits.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: