vue3 vue2的兄弟组件的传值_vue兄弟组件emit传值(2)

mitt 的优点：

• 体积小，网上流传只有200bytes（我打开看有349b，也是挺小了）
• 支持全部事件的监听和批量删除
• 不依赖于vue实例，可以用到react或者jquery上去

所以，大胆开心地开始使用吧！

一、如何使用？

下面我以vue中使用为例：

1. 安装

npm install --save mitt

2. 创建一个js文件 比如 utils/bus.js

import mitt from 'mitt'
const emiiter = mitt()
export default emiiter

3. 在兄弟PageA中发布事件：

import emitter from '@/utils/bus'
import { ref } from 'vue'
const Aname= ref('我是小虾') 
emitter.emit('handleEvent', Aname)

4. 在兄弟PageB中监听事件，并在组件销毁时取消监听

import emiiter from '@/utils/bus'
import { ref, onBeforeMount, onUnmounted } from 'vue'
const Bname= ref('') // 等待接收
const handelEventFn1 = (Aname)=>{
 Bname.value = Aname.value
 }


onBeforeMount(() => {
  emiiter.on('handleEvent',handelEventFn1)  // 开启监听，监听到handleEvent事件后，执行handelEventFn1函数，当然你也可以在另外的页面监听handleEvent事件去执行handelEventFn2
})
onUnmounted(() => {
  emiiter.off('handleEvent',handelEventFn) // 取消handleEvent事件的handelEventFn函数监听
  emiiter.off('handleEvent') // 取消handleEvent事件的全部处理函数的监听
})

二、mitt源码解读：

mitt是用new Map()作为整体的事件处理中心的
而JavaScript的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题，ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

exports.__esModule = true;
function mitt(all) {
	// 声明一个Map类型，作为整体事件处理中心
	all = all || new Map(); // Map类型是键值对的有序列表，而键和值都可以是任意类型
	return {
		all,
		on (type, handler) {
			// 先读取是否有对应事件的处理函数数组
			let handlers = all.get(type);
			if (handlers) {
				// 将新注册的函数推送到对应时间的函数数组中(发布一个事件，可以承载多个函数)
				handlers.push(handler);
			}
			else {
				// 创建一个对应 type 的函数数组
				all.set(type, [handler]);
			}


### 常用的JavaScript设计模式

* 单体模式

* 工厂模式

* 例模式

  ![](https://img-blog.csdnimg.cn/20210616215753130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

  

### 函数

* 函数的定义

* 局部变量和全局变量

* 返回值

* 匿名函数

* 自运行函数

* 闭包

  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

  ![](https://img-blog.csdnimg.cn/20210616215826268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)