Diffusion et réception d'événements Vue2.0 (mode observateur)

Cet article présente principalement la diffusion et la réception des événements Vue2.0 (mode observateur). Maintenant, je le partage avec vous et le donne comme référence.

Diffusion et réception d'événements 1.Vue1.0 (mode observateur)

Cette méthode de communication de données entre les premiers composants de Vue1.0, le site officiel de Vue fournit deux méthodes $dispatch et $broadcast.

Mais ces deux méthodes seront abandonnées après vue2.0 Les raisons suivantes sont données par le site officiel de vue

Document officiel

2.Diffusion et réception d'événements Vue2.0 (mode observateur)

$emit, $on, $off peuvent être utilisés dans vue2.0 Distribuez, surveillez et annulez respectivement les événements d'écoute. La suggestion de mise à niveau la plus simple donnée par le responsable est d'utiliser un processeur d'événements centralisé, et elle indique également clairement qu'une instance de vue vide peut le faire, car l'instance Vue implémente une interface de distribution d'événements

S'il vous plaît. regardez le code directement. Lors de l'initialisation, ajoutez un objet vue vide nommé eventhub aux données dans le fichier App.vue global :

new Vue({
 el: '#app',
 router,
 render: h => h(App),
 data: {
  eventHub: new Vue()
 }
})

.

De cette façon, nous pouvons appeler les méthodes de transmission et de réception d'événements dans n'importe quel composant. Alors, comment le composant transmet-il et reçoit-il ? Veuillez regarder le code avant :

Un événement d'appel dans un composant se déclenche

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$root.eventHub.$emit('你的事件名字', 你的需要传送的数据)

Ce qui précède est un composant émettant un événement, ce qui peut être compris comme j'ai envoyé une diffusion. Si d'autres composants ont besoin de ma diffusion, veuillez vous adapter à ma chaîne. Cette chaîne est le nom de votre événement et le contenu de la diffusion est. vous. Données transmises, alors la question est, comment les autres composants les reçoivent-ils ? Veuillez consulter le code

this.$root.eventHub.$on('你的事件名字', (传送的数据)=>{
  handle(yourData)
} )

Les composants qui doivent écouter la diffusion peuvent la recevoir via notre eventHub défini globalement .$on , le canal de réception est le nom de l'événement diffusé et le numéro dans le rappel est le contenu diffusé.

3. Écrivez-le de manière plus concise

Si vous avez une certaine compréhension de js, vous savez peut-être que js a un truc de prototype, ceci est l'essentiel Ajouter des propriétés supplémentaires aux objets js.

Par exemple, déclarer un objet

var person=function(){
  this.name="小明";
}

et ensuite on étend cela object, Par exemple, lors de l'ajout d'une méthode de parole, le prototype d'outil utile est utile

person.prototype.say=function(){
  alert(this.name);
}

Ceci étend l'objet fonction d'origine

en l'appelant directement

 var a=new person();

personne. say(); Xiao Ming apparaîtra. L’avantage est qu’aucune mémoire supplémentaire ne sera générée et que tous les objets instanciés hériteront de cette méthode du prototype.

Vue est en fait une bibliothèque de classes js. Bien sûr, vous pouvez également utiliser la chose magique du prototype pour développer les propriétés personnalisées :

Initialisez Vue. . Ajoutez cette phrase avant app :

Vue.prototype.$eventHub= Vue.prototype.$eventHub || new Vue()

De cette façon, nous pouvons appeler $eventHub directement dans le composant

Ce qui suit est une reformulation de la méthode ci-dessus :

Publié par

//通过this.$root.eventHub获取此对象
//调用$emit 方法
this.$eventHub.$emit('你的事件名字', 你的需要传送的数据)

Récepteur

 this.$eventHub.$on('你的事件名字', (传送)=>{
    handle(yourData).
  } )

4. Fermez la diffusion

Pour désactiver la diffusion, nous utilisons principalement $off (le nom de votre événement) pour annuler l'écoute !

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère sera utile à tout le monde à l'avenir. Utile.

Articles connexes :

Le problème et la solution du scintillement de {{}} lors du rendu de la vue

Une brève discussion sur js Problèmes d'acquisition avec les valeurs ModelAndView

Solution au problème de scintillement du chargement de la page vue

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!