Vue3.x рекомендует использовать mitt.js

внешний интерфейс Vue.js
Vue3.x рекомендует использовать mitt.js

Vue2.x использует EventBus для связи компонентов, а Vue3.x рекомендует использовать mitt.js.

Чем mitt.js лучше, чем EventBus на экземпляре Vue? Во-первых, он достаточно мал, всего 200 байт, а во-вторых, поддерживает мониторинг и пакетное удаление всех событий, не зависит от экземпляров Vue, поэтому его можно использовать между фреймворками, React или Vue, и даже проекты jQuery могут использовать тот же набор библиотек.

быстрый старт

npm install --save mitt

Режим 1, глобальная шина, глобальные свойства монтирования в файле записи vue main.js.

import { createApp } from 'vue';
import App from './App.vue';
import mitt from "mitt"

const app = createApp(App)
app.config.globalProperties.$mybus = mitt()

Способ 2: инкапсулируйте пользовательский файл шины транзакций mybus.js, создайте новый файл js и импортируйте его туда, где вы хотите его использовать.

import mitt from 'mitt'
export default mitt()

Способ 3, импортировать и использовать непосредственно в компоненте. Этот метод рекомендуется для всех, поскольку децентрализованным способом легче управлять и устранять проблемы.

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import mitt from 'mitt'
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  setup (props) {
    const formItemMitt = mitt()
    return {
      formItemMitt
    }
  }
}
</script>

Как пользоваться

Фактически использование mitt аналогично EventEmitter: события добавляются методом on, удаляются методом off и очищаются методом clear.

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

Следует отметить, что импортированная перчатка представляет собой вызов функции, а не новый метод. При удалении события вам необходимо передать имя и функцию-ссылку, которая определяет событие.

основной принцип

Принцип очень простой, то есть функция сохраняется методом карты. Менее 30 строк кода после обрезки.

export default function mitt(all) {
	all = all || new Map();

	return {
		all,

		on(type, handler) {
			const handlers = all.get(type);
			const added = handlers && handlers.push(handler);
			if (!added) {
				all.set(type, [handler]);
			}
		},

		off(type, handler) {
			const handlers = all.get(type);
			if (handlers) {
				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
			}
		},

		emit(type, evt) {
			((all.get(type) || [])).slice().map((handler) => { handler(evt); });
			((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
		}
	};
}

Vue3 полностью удален из экземпляра$on,$offи$onceметод.$emitВсе еще часть существующего API, поскольку она используется для запуска событий, которые декларативно присоединены родительским компонентом.

Категории