Attribut ref de Vue3

Vue3 内置属性Attributs intégrés de Vue3

refL'attribut est utilisé pour enregistrer des informations de référence pour des éléments ou des composants enfants, afin que les éléments DOM ou les instances de composants puissent être directement accessibles dans le code JavaScript.

Description de base

refC'est un moyen important d'obtenir des éléments DOM ou des instances de composants dans Vue. Il nous permet de manipuler directement le DOM ou d'appeler des méthodes de composants enfants après le montage de l'instance Vue.

  • Type: String | Function
  • Objectif: Accéder aux éléments DOM ou aux instances de composants enfants pour effectuer des opérations telles que le contrôle du focus et les appels de méthodes.

Utilisation de base

1. Utilisation de ref dans l'API Options

Dans l'API Options, les références enregistrées par ref sont stockées dans l'instance du composant$refsobjet :

Exemple

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Mettre le focus sur le champ</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
// Accéder aux éléments DOM via $refs
      this.$refs.inputField.focus()
    }
  }
}
</script>

2. Utilisation de ref dans l'API Composition

Dans l'API Composition, il est recommandé d'utiliseruseTemplateRefpour obtenir des références de template :

Exemple

<template>
  <div>
    <input type="text" ref="inputField" />
    <button @click="focusInput">Mettre le focus sur le champ</button>
  </div>
</template>

<script setup>
import { useTemplateRef } from 'vue'

// Créer une référence correspondant au nom de ref dans le template
const inputField = useTemplateRef('inputField')

function focusInput() {
// Accéder directement à l'élément DOM
  inputField.value?.focus()
}
</script>

Cas d'utilisation

1. Accéder aux éléments DOM

En utilisant ref, vous pouvez accéder directement aux éléments DOM pour effectuer des opérations telles que le contrôle du focus et la récupération de valeurs :

Exemple

<template>
  <div>
    <input type="text" ref="username" placeholder="Nom d'utilisateur" />
    <button @click="getValue">Obtenir la valeur</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
// Obtenir la valeur du champ de saisie
      const value = this.$refs.username.value
console.log('input value:', value)
    }
  }
}
</script>

2. Accéder aux instances de composants enfants

En utilisant ref, vous pouvez accéder à une instance de composant enfant, appeler ses méthodes ou accéder à ses données :

Exemple

<!-- Composant parent -->
<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Appeler la méthode du composant enfant</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
// Appeler la méthode du composant enfant
      this.$refs.childRef.sayHello()
// Accéder aux données du composant enfant
console.log('Child component data:', this.$refs.childRef.message)
    }
  }
}
</script>

3. Ref fonctionnelle

ref peut également accepter une fonction, qui est appelée à chaque mise à jour, vous donnant un contrôle total sur l'endroit où la référence est stockée :

Exemple

<template>
  <div>
    <input type="text" :ref="el => inputEl = el" />
    <button @click="focusInput">Concentrer</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputEl: null
    }
  },
  methods: {
    focusInput() {
      this.inputEl?.focus()
    }
  }
}
</script>

Notes

Moment de l'enregistrement de la ref: Parce que la ref elle-même est créée à partir du résultat de la fonction de rendu, elle doit être accessible après le montage du composant. Sicreatedvous y accédez dans un hook de cycle de vie,$refsce sera toujours un objet vide.

Non réactif：$refsIl est non réactif, donc il ne doit pas être utilisé pour la liaison de données dans les templates. Utilisez-le uniquement en JavaScript pour les opérations DOM.

Évitez d'abuser de ref: manipulez le DOM et les composants enfants autant que possible via une approche pilotée par les données et la gestion des événements. Un usage excessif de ref rendra le code difficile à maintenir.

Exemple

<!-- Non recommandé : accéder à ref dans created -->
<script>
export default {
  created() {
    console.log(this.$refs.inputField) // undefined
  },
  mounted() {
console.log(this.$refs.inputField) // on peut y accéder
  }
}
</script>

Utilisation avec v-for

ref peut également s'utiliser avecv-forv-for, qui crée un tableau contenant tous les éléments DOM ou instances de composants correspondants :

Exemple

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id" :ref="el => setItemRef(el, index)">
      {{ item.name }}
    </div>
    <button @click="logRefs">Afficher toutes les références</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
{ id: 1, name: 'Project 1' },
{ id: 2, name: 'Project 2' },
{ id: 3, name: 'Projet trois' }
      ],
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el, index) {
      if (el) {
        this.itemRefs[index] = el
      }
    },
    logRefs() {
console.log('Toutes les références :', this.itemRefs)
    }
  }
}
</script>

Vue3 内置属性Attributs intégrés de Vue3

Autres extensions