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

Question

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?

Answer 1

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...

Answer 2

• $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.