Cet article vous apporte des connaissances pertinentes sur vue, qui présente principalement des problèmes liés au traitement des événements de base. Le traitement des événements Vue est un aspect nécessaire de chaque projet Vue. Il est utilisé pour capturer les entrées des utilisateurs, partager des données et de nombreuses autres façons créatives. Jetons-y un coup d'œil ensemble, j'espère que cela sera utile à tout le monde.
【Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js】
La gestion des événements Vue est un aspect nécessaire de chaque projet Vue. Il est utilisé pour capturer les entrées des utilisateurs, partager des données et de nombreuses autres façons créatives.
Dans cet article, je couvrirai les bases et fournirai quelques exemples de code pour gérer les événements.
En utilisant la directive v-on (@ pour faire court), nous pouvons écouter les événements DOM et exécuter des méthodes de gestion ou du Javascript en ligne :
<div v-on:click='handleClick' /> <!-- 相当于 --> <div @click='handleClick' />
Nous aborderons certains des événements les plus courants que vous souhaiterez peut-être capturer , single Cliquez ici pour une liste complète des événements DOM.
Un cas d'utilisation courant dans n'importe quel framework Web est de vouloir qu'un composant enfant puisse émettre des événements vers son composant parent. Cela permettra une liaison de données bidirectionnelle.
Un exemple de ceci est l'envoi de données d'un composant d'entrée vers un formulaire parent.
La syntaxe d'émission des événements est différente selon que l'on utilise l'API Options ou l'API Composition.
Dans l'API Options, nous pouvons simplement appeler ceci.$emit(eventName, payload):
export default {
methods: {
handleUpdate() {
this.$emit('update', 'Hello World')
}
}
}Cependant, l'API Composition n'a pas cela. Au lieu de cela, nous pouvons accéder à la méthode d'émission directement en utilisant la méthode de configuration de Vue3. Le deuxième paramètre de la méthode
setup est la variable de contexte, qui contient trois attributs : attrs, slot et submit.
Tant que l'objet contextuel est importé, submit peut être appelé avec les mêmes paramètres que l'API Options.
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}Une façon de ranger votre code est d'utiliser la déstructuration d'objets pour importer directement des émissions. Cela ressemble à ceci.
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}Que nous utilisions l'API Options ou l'API Composition, notre composant parent écoute les événements personnalisés de la même manière.
<HelloWorld @update='inputUpdated'/>
Si la méthode que nous émettons reçoit également une valeur, nous pouvons la capturer de deux manières différentes - selon que nous travaillons en ligne ou utilisons une autre méthode.
Tout d'abord, nous pouvons utiliser la valeur $event transmise dans le modèle.
<HelloWorld @update='inputUpdated($event)'/>
Deuxièmement, si nous utilisons une méthode pour gérer l'événement, la valeur transmise sera automatiquement transmise à notre méthode comme premier paramètre.
<HelloWorld @update='inputUpdated'/>
Derniers articles par auteur
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
Derniers numéros
Existe-t-il un moyen de définir la prop route dans vue ?
Je souhaite accéder à un onglet spécifique de la page this.$router.push({name:"AdminN...
Depuis 2024-04-06 11:35:59
0
1
456
Rubriques connexes
Plus>
-
Le composant parent Vue appelle la méthode du composant enfant
-
vue v-si
-
La différence entre vue2.0 et 3.0
-
Comment transmettre une valeur au composant vue
-
La différence entre vue3.0 et 2.0
-
vue instructions communes
-
Quelles sont les instructions couramment utilisées dans vue ?
-
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
