Exemple détaillé de la méthode $on de vue

Vue.js est un framework frontal progressif qui fournit aux développeurs des API et des outils riches pour créer facilement des interfaces utilisateur complexes et des applications d'une seule page. L'une des méthodes très utiles est la méthode $on, qui sera décrite et démontrée en détail dans cet article.

La méthode $on est une méthode d'instance de l'objet Vue. Elle est principalement utilisée pour écouter un événement personnalisé dans l'instance Vue. Lorsqu'un événement personnalisé est déclenché, une fonction de rappel peut être exécutée pour répondre à l'événement. La syntaxe de la méthode $on est la suivante :

vm.$on(event, callback)

où vm représente l'instance Vue, event représente le nom de l'événement personnalisé surveillé et callback représente la fonction de rappel à exécuter lorsque l'événement est déclenché.

Par exemple, nous créons une instance Vue puis écoutons un événement personnalisé nommé "test" sur l'instance comme indiqué ci-dessous :

var vm = new Vue();
vm.$on("test", function () {
  console.log("test事件被触发了！");
});

Dans cet exemple, nous utilisons la méthode $on dans l'instance Vue Pour écouter le " test" et transmettez une fonction anonyme comme fonction de rappel. Cette fonction sera exécutée lorsque l'événement "test" sera déclenché.

Voyons maintenant comment déclencher un événement personnalisé. Nous pouvons utiliser la méthode $emit pour déclencher un événement personnalisé comme indiqué ci-dessous :

vm.$emit("test");

Dans cet exemple, nous utilisons la méthode $emit pour déclencher un événement personnalisé nommé "test". Lorsque nous appelons la méthode $emit, la fonction de rappel définie dans la méthode $on sera exécutée et le message « l'événement de test a été déclenché ! » sera affiché.

En plus de la méthode $emit, il existe d'autres méthodes qui peuvent être utilisées pour déclencher des événements personnalisés, telles que les méthodes $dispatch et $broadcast. Aucun récit n’est donné ici.

Il est à noter que la fonction de rappel enregistrée dans la méthode $on ne sera pas exécutée immédiatement. Lorsque cet événement est déclenché, l'instance Vue appellera toutes les fonctions de rappel enregistrées dans l'ordre. Si la méthode $emit est appelée immédiatement après la méthode $on, la fonction de rappel risque de ne pas être exécutée car l'événement n'a pas été écouté.

Lorsque vous utilisez la méthode $on, vous pouvez également passer un paramètre facultatif pour spécifier le contexte d'exécution de la fonction de rappel, comme indiqué ci-dessous :

vm.$on("test", function () {
  console.log(this.message);
}, { message: "Hello World!" });

Dans cet exemple, nous utilisons un objet pour passer le paramètre de contexte d'exécution. Évidemment, dans la fonction de rappel, this.message pointera vers la chaîne "Hello World!". Cette fonctionnalité rend les fonctions de rappel plus flexibles et adaptables.

La dernière chose à noter est que la méthode $on surveille uniquement les événements personnalisés sur l'instance Vue actuelle et n'affectera pas les autres instances. Si vous souhaitez partager des événements personnalisés entre plusieurs instances, envisagez d'utiliser le mécanisme de bus d'événements de l'instance Vue.

En bref, la méthode $on est une méthode très importante et pratique dans le framework Vue.js. En utilisant cette méthode, nous pouvons facilement mettre en œuvre une surveillance et une réponse à divers événements personnalisés.

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!