A quoi servent $refs et $el dans vue

Utilisation : 1. "$refs" est utilisé pour enregistrer des informations de référence pour des éléments ou des sous-composants, la syntaxe est "this.$refs.(ref value)" ou "this.$refs.(ref value).method ()"; 2. "$el" est utilisé pour obtenir l'élément DOM associé à l'instance Vue, la syntaxe est "this.$refs.component".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelles sont les utilisations de $refs et $el dans vue ?

ref est utilisé pour enregistrer des informations de référence pour des éléments ou des sous-composants

ref Il existe trois utilisations :

　1. Pour ajouter une référence à un. élément ordinaire, utilisez ceci .$refs. (valeur de référence) Ce que vous obtenez est l'élément dom

　　2. Ajoutez une référence au sous-composant, utilisez this.$refs (valeur de référence) pour obtenir l'instance du composant, et vous pouvez utiliser. toutes les méthodes du composant. Lorsque vous utilisez la méthode, vous pouvez l'utiliser directement this.$refs.(ref value).method().

　3. Comment utiliser v-for et ref pour obtenir un ensemble de tableaux ou de nœuds dom

　Si vous souhaitez ajouter différentes références via le parcours v-for, n'oubliez pas d'ajouter un signe :, c'est-à-dire : ref = une variable ;

　Ceci et d'autres points Les attributs sont les mêmes. S'il s'agit d'une valeur fixe, il n'est pas nécessaire d'ajouter le signe :. S'il s'agit d'une variable, pensez à ajouter le signe :. (Avec un deux-points, cela signifie que ce qui suit est une variable ou une expression ; s'il n'y a pas de deux-points, cela signifie la constante de chaîne correspondante (String).

Les pièges à noter sont :

1. ref doit être écrit une fois le rendu du dom terminé. Oui, assurez-vous que le dom a été rendu lors de son utilisation, par exemple, appelez-le dans le hook du cycle de vie Mounted(){}, ou appelez-le dans this.$nextTick(()=). >{})

2. Si ref est. S'il y a plusieurs noms en double après la boucle, la valeur de ref sera un tableau pour obtenir une seule référence, bouclez simplement

vers. obtenir le DOM associé à l'instance Vue ;

Par exemple, si je veux obtenir le composant personnalisé tabControl et obtenir son OffsetTop, je dois d'abord obtenir le composant

Définir l'attribut ref='a name (tabControl2. )' dans le composant,

Ensuite, $refs.tabControl2 obtient le composant

Rappelez-vous : l'attribut ref, et lors de l'obtention du composant, vous devez utiliser $refs

pour obtenir OffsetTop. Le composant n'est pas un élément DOM. et n'a pas OffsetTop, il ne peut donc pas être obtenu en cliquant sur .OffsetTop. Vous devez utiliser $el pour obtenir les éléments DOM dans le composant

[Recommandation associée : "

Tutoriel vue.js

"]

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!