vue3 mitt 跨组件传值

vue3 mitt 跨组件传值

1.安装 mitt

	npm install --save mitt

2.main.js引入mitt.js

	import { createApp } from "vue";
	import App from "./App.vue";
	import mitt from 'mitt'
	
	const app = createApp(App);
	app.config.globalProperties.$mitt = new mitt();
	app.use(router).use(store).use(Antd).mount("#app");

3.传递组件 发送数据

	import { getCurrentInstance } from 'vue'
 	setup(){
		let { proxy } = getCurrentInstance()
		//发送数据 
	    const handleMemberClick = () => {
	   		const member = { type:1 }
	    	proxy.$mitt.emit('handleMemberClick', { type: member.type })
	    }
    }

4.取值

	import { getCurrentInstance } from 'vue'
 	
 	setup(){
		let { proxy } = getCurrentInstance()
		  // 传递过来的事件
	    proxy.$mitt.on('handleMemberClick', (res) => {
	    	console.log(res.type) // 1
	    })
    }

5.销毁监听

 onBeforeUnmount(() => {
      console.log('销毁');
      proxy.$mitt.off("handleMemberClick")
    })