2024年最全vue3 vue2的兄弟组件的传值_vue兄弟组件emit传值，系列教学

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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]);
			}
		},
		off (type, handler) {
			// 从map中取出所有的对应的函数数组
			let handlers = all.get(type);
			if (handlers) {
				// 如果存在hanlder，进行筛选后，从数组中删除。
				// 如果不存在直接清空当前事件所有的处理函数
				if (handler) {
					handlers.splice(handlers.indexOf(handler) >>> 0, 1);
				}
				else {
					all.set(type, []);
				}
			}
		},
		emit (type, evt) {
			let handlers = all.get(type);
			// 按照取出的函数数组遍历循环执行
			if (handlers) {
				handlers
					.slice()
					.map((handler) => {
						handler(evt);
					});
			}
			// 如果注册了 "\*" 的事件，执行它
			handlers = all.get('\*');
			if (handlers) {
				handlers
					.slice()
					.map((handler) => {
						handler(type, evt);
					});
			}
		}
	};
}
exports.default = mitt;

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包