Le bus événementiel vue est-il supprimé ?

vue3 a annulé le bus de l'événement mondial en raison du manque de sécurité. Le bus d'événements global est une technologie de communication globale à tous les composants, c'est-à-dire qu'une communication entre tous les composants peut être réalisée. Dans vue3, si vous souhaitez utiliser le bus d'événements global, vous devez introduire le gant de bibliothèque tiers ou le petit émetteur.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

vue3 a annulé le bus de l'événement mondial en raison du manque de sécurité.

Le bus d'événements global de Vue

Le bus d'événements global est une technologie de communication de composants arbitraires globale.

Comme son nom l'indique, la communication entre tous les composants peut être réalisée.

Il communique via une marionnette, accessible à tous les composants. Il est nommé $bus dans vue$bus

在vue2中

我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus

beforeCreate() {
	Vue.prototype.$bus = this
}

记得把钩子写在 挂载之前即可。

使用时：

• 在需要接收数据的组件中使用 mounted钩子绑定事件监听

mounted() {
  this.$bus.$on('hello',(data) => {
    console.log(data);
  })
},

• 在需要发送数据的组件中需要发送的操作中触发该方法即可

methods: {
  sendStudentName(){
    this.$bus.$emit('hello',this.name)
  }
},

• 还没完，如果组件销毁，记得解绑事件，在哪绑定就在哪解绑，使用beforeDestroy钩子

beforeDestroy() {
  this.$bus.$off('hello')
},

在vue3

在vue3中，取消了全局事件总线，如果想要使用，我们需要引入第三方库 mitt或tiny-emitter

1、安装mitt库

npm i mitt -s

2、在根目录封装一个 js 文件，以便组件中导入使用

文件起名最好见名知义 例如 eventBus.js

内容：

//导入
import mitt from 'mitt';
 //定义,定义也最好见名知义
const emitter = mitt();
 //暴露
export default emitter;

3、使用

1）相互通信的组件均需要导入js

import emitter from '../../eventBus'

2） 接收数据的组件 在setup（）

Dans vue2

On peut utiliser le hook de cycle de vie beforecreated
directement dans le fichier d'entrée mian.js pour créer directement $bus code>

setup(){
  emitter.on('event',(info) => {
    ...
  })
  return{}
}

N'oubliez pas d'écrire le hook avant de monter.

Lorsqu'il est utilisé :

Utilisez le hook monté pour lier la surveillance des événements dans le composant qui doit recevoir des données

setup(){
	function send(info) {
		emitter.emit('event',info)
	)
	return{}
}

Déclenchez simplement cette méthode dans l'opération qui doit être envoyée dans le composant qui doit envoyer des données

li>

onBeforeUnmount(()=>{
	emitter.off("event", onEvent);
})

• 🎜Ce n'est pas encore fini. Si le composant est détruit, n'oubliez pas de dissocier l'événement et de le dissocier là où il était lié. Utilisez beforeDestroy code>Hook 🎜

rrreee🎜🎜🎜dans vue3 🎜🎜🎜dans vue3, Le bus d'événements global a été annulé Si nous voulons l'utiliser, nous devons introduire la bibliothèque tierce mitt ou tiny-emitter🎜. 🎜1. Installez la bibliothèque mitt🎜rrreee🎜2. À la racine Le répertoire encapsule un fichier js afin qu'il puisse être importé et utilisé dans le composant. Par exemple, eventBus. js🎜🎜Contenu : 🎜rrreee🎜3. Utilisez 🎜🎜1) Composants qui communiquent entre eux Les deux doivent importer js🎜rrreee🎜2) Le composant qui reçoit les données est lié à l'écouteur d'événement dans setup()🎜rrreee🎜La fonction flèche ici peut également être remplacée par une fonction ordinaire🎜🎜3) Envoyer les données Les données peuvent être transférées lorsque le composant est déclenché🎜rrreee🎜4) Avant que le composant ne soit détruit, dissociez l'événement,🎜rrreee🎜Si vous utilisez une fonction normale, placez la fonction dans la deuxième position du paramètre. S'il s'agit d'une fonction fléchée, vous n'avez pas besoin de l'écrire. Comme ci-dessus onEvent🎜🎜[Recommandations associées : 🎜tutoriel vidéo vuejs🎜, 🎜développement web front-end🎜]🎜

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!