Comment utiliser $refs pour accéder aux composants et aux éléments HTML dans Vue

$refs dans Vue est une fonctionnalité très pratique qui nous permet d'accéder aux composants et aux éléments HTML dans une instance Vue. Cette fonctionnalité nous permet d'accéder directement aux éléments DOM dans les modèles, les propriétés calculées, les méthodes et les hooks de cycle de vie, et peut simplifier l'écriture de code. Cet article explique comment utiliser $refs pour accéder aux composants et aux éléments HTML dans Vue.

1. Accéder aux composants

Dans Vue, les composants sont des modules importants. Nous utiliserons de nombreux composants dans le projet, l'accès aux composants est donc nécessaire. Alors, comment pouvons-nous utiliser $refs pour accéder aux composants ?

Dans Vue, nous pouvons définir un attribut ref pour le composant. Dans les modèles ou JS, nous pouvons utiliser $refs pour accéder à ce composant.

Écrivons un exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<child-component ref="myComponent"></child-component>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer ChildComponent depuis './ChildComponent.vue'

export default {
composants : {

ChildComponent

},
Mounted() {

this.$refs.myComponent.doSomething()

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Dans cet exemple, nous avons référencé un composant enfant dans le composant enfant du composant parent et ajouté un attribut ref pour l’accès. Dans le hook de cycle de vie monté, nous pouvons accéder à ce composant et appeler la méthode doSomething de ce composant.

En bref, il est très pratique d'utiliser $refs pour accéder aux composants, on peut l'utiliser directement pour les opérations d'accès.

2. Accéder aux éléments HTML

Il est également très simple d'utiliser $refs pour accéder aux éléments HTML. Nous pouvons également définir un attribut ref pour un élément, puis utiliser $refs pour accéder à cet élément dans JS. Écrivons un exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<input type="text" ref="myInput">

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
Mounted() {

this.$refs.myInput.focus()

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Dans cet exemple, nous ajoutons un attribut ref à l'élément d'entrée pour l'accès. Dans le hook de cycle de vie monté, nous appelons la méthode focus() pour faire de l'élément d'entrée le focus.

De même, il est également très pratique d'utiliser $refs pour accéder aux éléments HTML. Nous pouvons directement ajouter l'attribut ref à l'élément dans le modèle pour effectuer des opérations d'accès.

3. Choses à noter

Dans Vue, il est très pratique d'utiliser $refs pour accéder aux composants et aux éléments HTML, mais il doit être utilisé avec prudence. Les composants et éléments accessibles par $refs doivent avoir été rendus. Si vous accédez à un élément ou un composant avant de le monter, vous obtiendrez un élément indéfini.

Dans un composant Vue, si nous effectuons des opérations asynchrones ou manipulons des données, le hook de cycle de vie de ce composant changera. Ce changement peut entraîner le retour de $refs indéfini. Par conséquent, soyez prudent lorsque vous utilisez $refs et assurez-vous que lors de l'accès à un élément ou un composant, il a été rendu.

Dans le même temps, nous devons également prêter attention à la dénomination des composants afin de garantir leur caractère unique. Parce que lorsqu'un composant est accédé via $refs, il est accessible par son nom. S'il existe plusieurs composants portant le même nom, des composants incorrects peuvent être accédés.

4. Résumé

Dans Vue, il est très pratique d'utiliser $refs pour accéder aux composants et aux éléments HTML. Ajoutez simplement un attribut ref au composant ou à l'élément et vous pourrez y accéder dans JS. Cependant, nous devons faire attention au fait que le composant ou l'élément renvoyé par $refs a déjà été rendu, et nous devons faire attention au nom du composant pour garantir son unicité.

Dans le développement réel, nous pouvons utiliser $refs en conjonction avec v-if, v-for et d'autres instructions pour nous aider à mieux mener à bien le projet. Bien entendu, lorsque vous utilisez $refs, veillez à ne pas en abuser et évitez de modifier directement les données du composant enfant dans le composant parent, ce qui détruirait le principe du flux de données unidirectionnel.

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!