# Refs de template
Cette page suppose que vous avez déjà lu les Principes de base des composants. Lisez-le d'abord si vous n'êtes pas familier avec les composants.
Malgré l'existence des props et événements, , il se peut que vous deviez parfois accéder directement à un composant enfant en JavaScript. Pour ce faire, vous pouvez attribuer un ID de référence au composant enfant ou à l'élément HTML à l'aide de l'attribut ref
. Par exemple:
<input ref="input" />
Cela peut être utile lorsque vous souhaitez, par exemple, metre le focus de façon programmatique sur l'élément input au montage du composant:
const app = Vue.createApp({})
app.component('base-input', {
template: `
<input ref="input" />
`,
methods: {
focusInput() {
this.$refs.input.focus()
}
},
mounted() {
this.focusInput()
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
De plus, vous pouvez ajouter un autre ref
au composant lui-même et l'utiliser pour déclencher l'événement focusInput
à partir du composant parent:
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.focusInput()
WARNING
Les $refs
ne sont recupérés qu'après le rendu du composant. Il est uniquement conçu comme un moyen détourné pour la manipulation directe des enfants - vous devez éviter d'accéder à $refs
à partir de templates ou de propriétés computed.
Voir aussi: Utilisation des refs de template dans le Composition API