Wird der Vue-Event-Bus abgeschafft?

vue3 hat den globalen Eventbus wegen mangelnder Sicherheit abgesagt. Der globale Ereignisbus ist eine globale Kommunikationstechnologie für beliebige Komponenten, dh die Kommunikation zwischen beliebigen Komponenten kann erreicht werden. Wenn Sie in vue3 den globalen Ereignisbus verwenden möchten, müssen Sie die Bibliothek Mitt oder Tiny-Emitter eines Drittanbieters einführen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

vue3 hat den globalen Eventbus wegen mangelnder Sicherheit abgesagt.

vues globaler Event-Bus

Der globale Event-Bus ist eine globale Kommunikationstechnologie mit beliebigen Komponenten.

Wie der Name schon sagt, kann eine Kommunikation zwischen beliebigen Komponenten erreicht werden.

Es kommuniziert über eine Puppe, die für alle Komponenten zugänglich ist. In vue heißt es $bus$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（）

In vue2

Wir können den Lebenszyklus-Hook beforecreated
direkt in der Eintragsdatei mian.js verwenden, um direkt $bus zu erstellen code>

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

Denken Sie daran, den Hook vor dem Mounten zu schreiben.

Bei Verwendung:

Verwenden Sie den Hook mount, um die Ereignisüberwachung in der Komponente zu binden, die Daten empfangen muss

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

Lösen Sie diese Methode einfach in der Operation aus, die in der Komponente gesendet werden muss, die Daten senden muss

li>

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

• 🎜Es ist noch nicht vorbei. Wenn die Komponente zerstört wird, denken Sie daran, das Ereignis zu lösen und es dort zu lösen, wo es gebunden war. Verwenden Sie beforeDestroy code>Hook 🎜

rrreee🎜🎜🎜in vue3 🎜🎜🎜in vue3 wurde der globale Event-Bus eingestellt. Wenn wir ihn verwenden möchten, müssen wir die Drittanbieter-Bibliothek mitt oder tiny-emitter einführen 🎜1. Installieren Sie die Mitt-Bibliothek🎜rrree🎜2. Im Stammverzeichnis ist eine JS-Datei gekapselt, damit sie in die Komponente importiert und verwendet werden kann. Zum Beispiel: eventBus. js🎜🎜Inhalt: 🎜rrreee🎜3. Verwenden Sie 🎜🎜1) Komponenten, die miteinander kommunizieren. Beide müssen js importieren🎜rrreee🎜2) Die Komponente, die die Daten empfängt, ist an den Ereignis-Listener in setup()🎜rrreee🎜Die Pfeilfunktion kann hier auch durch eine gewöhnliche Funktion ersetzt werden🎜🎜3) Daten senden Daten können übertragen werden, wenn die Komponente ausgelöst wird🎜rrreee🎜4) Bevor die Komponente zerstört wird, Lösen Sie die Bindung des Ereignisses. Wenn Sie eine normale Funktion verwenden, platzieren Sie die Funktion an der zweiten Parameterposition. Wenn es sich um eine Pfeilfunktion handelt, müssen Sie sie nicht schreiben. Wie oben aufEvent🎜🎜[Verwandte Empfehlungen: 🎜vuejs-Video-Tutorial🎜, 🎜Web-Front-End-Entwicklung🎜]🎜

Das obige ist der detaillierte Inhalt vonWird der Vue-Event-Bus abgeschafft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!