interface Web
js tutoriel
Comment les composants non parent-enfant du bus d'événements communiquent entre eux
Comment les composants non parent-enfant du bus d'événements communiquent entre eux
Cette fois, je vais vous montrer comment les composants non-parents et enfants du bus d'événement communiquent entre eux. Quelles sont les précautions pour que les composants non-parents et enfants du bus d'événement communiquent entre eux. un cas pratique, jetons un coup d'oeil.
Parfois, des composants qui ne sont pas des relations parent-enfant doivent également communiquer. Dans un scénario simple, utilisez une instance Vue vide comme bus central Event :
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})Dans les cas plus complexes, vous devriez envisager d'utiliser le mode de gestion dédié state. C'est le cas de vuex
. eventBus est un intermédiaire de communication entre des composants qui agissent comme des frères.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<p id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</p>
<script>
var eventHub = new Vue( {
data(){
return{
todos:['A','B','C']
}
},
created:function () {
this.$on('add', this.addTodo)
this.$on('delete', this.deleteTodo)
},
beforeDestroy:function () {
this.$off('add', this.addTodo)
this.$off('delete', this.deleteTodo)
},
methods: {
addTodo: function (newTodo) {
this.todos.push(newTodo)
},
deleteTodo: function (i) {
this.todos.splice(i,1)
}
}
})
var newTodo = {
template:`<p><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></p>`,
data(){
return{
newtodo:''
}
},
methods:{
add:function(){
eventHub.$emit('add', this.newtodo)
this.newtodo = ''
}
}
}
var todoList = {
template:`<ul><li v-for="(index,item) in items">{{item}} \
<button @click="rm(index)">X</button></li> \
</ul>`,
data(){
return{
items:eventHub.todos
}
},
methods:{
rm:function(i){
eventHub.$emit('delete',i)
}
}
}
var app= new Vue({
el:'#todo-app',
components:{
newTodo:newTodo,
todoList:todoList
}
})
</script>
</body>
</html>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Comment JS détecte les scripts dans le navigateur
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bibliothèque de traitement d'événements en PHP8.0 : Événement
May 14, 2023 pm 05:40 PM
Bibliothèque de traitement d'événements en PHP8.0 : Événement Avec le développement continu d'Internet, PHP, en tant que langage de programmation back-end populaire, est largement utilisé dans le développement de diverses applications Web. Dans ce processus, le mécanisme événementiel est devenu un élément très important. La bibliothèque de traitement d'événements Event en PHP8.0 nous fournira une méthode de traitement d'événements plus efficace et plus flexible. Qu'est-ce que la gestion des événements ? La gestion des événements est un concept très important dans le développement d'applications Web. Les événements peuvent être n'importe quel type de ligne utilisateur
Ventes d'été Steam - Valve offre 95 % de réduction sur les jeux AAA et confirme les réductions sur les jeux viraux Palworld et Content Warning
Jun 26, 2024 pm 03:40 PM
Les soldes d'été de Steam ont déjà accueilli certaines des meilleures réductions sur les jeux, et cette année semble s'accumuler pour un autre home run de Valve. Une bande-annonce (à regarder ci-dessous) taquinant certains des jeux à prix réduit des soldes d'été Steam vient de sortir.
Comment utiliser le module d'événement Event de Pygame en Python
May 18, 2023 am 11:58 AM
Le module Événement de Pygame Événement (Événement) est l'un des modules importants de Pygame. Il est au cœur de la construction de l'ensemble du programme de jeu, comme les clics de souris, les frappes au clavier, le mouvement de la fenêtre de jeu, le redimensionnement de la fenêtre, le déclenchement d'intrigues spécifiques et la sortie. . Jeux, etc., ceux-ci peuvent être considérés comme des « événements ». Le type d'événement Pygame définit une structure spécifiquement utilisée pour traiter les événements, à savoir la file d'attente des événements. Cette structure suit le principe de base du « premier arrivé, premier traité » dans la file d'attente, nous pouvons traiter les opérations des utilisateurs de manière ordonnée et unique. -par un (événement déclencheur). Le tableau suivant répertorie les événements de jeu couramment utilisés dans Pygame : Nom Description QUIT L'utilisateur appuie sur le bouton de fermeture de la fenêtre ATIVEEVENTPy
En JavaScript, lorsque la fenêtre du navigateur est redimensionnée, de quel événement s'agit-il ?
Sep 05, 2023 am 11:25 AM
Utilisez les événements window.outerWidth et window.outerHeight pour obtenir la taille de la fenêtre en JavaScript lorsque le navigateur est redimensionné. Exemple Vous pouvez essayer d'exécuter le code suivant pour vérifier la taille de la fenêtre du navigateur à l'aide des événements −<!DOCTYPEhtml><html>
La bande-annonce des soldes d'été Steam offre 95 % de réduction sur les offres de jeux AAA et confirme les baisses de prix pour Palworld, Stellaris et Content Warning
Jun 26, 2024 am 06:30 AM
Les soldes d'été de Steam ont déjà accueilli certaines des meilleures réductions sur les jeux, et cette année semble s'accumuler pour un autre home run de Valve. Une bande-annonce (à regarder ci-dessous) taquinant certains des jeux à prix réduit des soldes d'été Steam vient de sortir.
Tesla envoie des invitations à Robotaxi pour l'événement de démonstration de conduite autonome du 10 octobre à Los Angeles
Sep 27, 2024 am 06:20 AM
Il était initialement prévu que Tesla dévoilerait son Robotaxi précédemment divulgué en août de cette année, mais le PDG Elon Musk a reporté l'événement, invoquant des changements esthétiques à l'avant du robotaxi et du temps supplémentaire nécessaire pour quelques dernières minutes.
Évaluation de Windows 10 : le point de vue du Dr Han
Jan 05, 2024 pm 12:11 PM
win10 est un système très facile à utiliser, mais il y aura parfois des problèmes avec le système, donc de nombreux utilisateurs qui ne maîtrisent pas les ordinateurs choisiront de réinstaller le système pour résoudre complètement le problème. Ils choisissent généralement le Dr Han, donc. ont-ils pensé. Si vous voulez savoir à quoi ressemble ce logiciel, jetons un coup d'œil à l'article. Réponse du Dr Han à propos de Win10 : C'est un très bon système Win10. Ce logiciel permet aux utilisateurs sans aucune connaissance de base de réinstaller le système via des opérations et des processus simples sans avoir besoin d'un lecteur de CD-ROM ou d'une clé USB. Le logiciel fournit également deux outils de réinstallation du système très importants : le système de miroir de sauvegarde du système et le système de miroir de restauration. Dans le même temps, le logiciel propose de nombreuses autres fonctions, telles que la réinstallation du système en un clic, la réinstallation du disque USB, etc.
Tesla Robotaxi révèle qu'il se déroulera le 10 octobre alors que les invitations seront envoyées à certains actionnaires
Sep 26, 2024 pm 06:06 PM
Il était initialement prévu que Tesla dévoilerait son Robotaxi précédemment divulgué en août de cette année, mais le PDG Elon Musk a reporté l'événement, invoquant des changements esthétiques à l'avant du robotaxi et du temps supplémentaire nécessaire pour quelques dernières minutes.
