How to install and use mitt to pass value in Vue3 brother component

Compared with EventBus on Vue instances, what is the advantage of mitt.js?

• First of all, it is small enough, only 200bytes.

• Secondly, it supports monitoring and batch removal of all events.

• It also does not rely on Vue instances and can be used across frameworks. React or Vue, and even jQuery projects can use the same set of libraries.

Install mitt in the project

npm install --save mitt

Usage method one: declare in the prototype

1. In main.ts\color{# Register in ef2d26}{main.ts}main.ts and mount it to the global

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

const app = createApp(App)

// vue3挂载到全局
app.config.globalProperties.$mitt = mitt();

app.use(router).mount('#app')

2. Use emit\color{#ef2d26}{emit}emit in the home.vue component to send Information

2. Use on\color{#ef2d26}{on}on in the about.vue component to receive information

Usage method two: Reference in the component

1. Create a new bus.ts\color{#ef2d26}{bus.ts}bus.ts file

import mitt from "mitt";
const emiter = mitt();
export default emiter;

2. Introduce and use emit\color{#ef2d26}{emit}emit in the home.vue component to send information

2. Introduce and use on\color{# in the about.vue component ef2d26}{on}on receive information

The above is the detailed content of How to install and use mitt to pass value in Vue3 brother component. For more information, please follow other related articles on the PHP Chinese website!