广州定制网站公司公司网站

安装mitt

"mitt": "^3.0.1",

• mitt 专注于最基本的事件订阅和发布，适合在需要轻量级事件管理的场景中使用
• mitt是不支持进行异步处理的

封装函数

在/@/utils/ 封装函数 eventBus.js

// eventBus.js
import mitt from 'mitt';const eventBus = mitt();
export default eventBus;

通知

import eventBus from '/@/utils/eventBus.js';const formatDateToString = (date: Date): string => {const year = date.getFullYear(); // 获取年份const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，记得加1，因为getMonth()返回的月份是从0开始的const day = String(date.getDate()).padStart(2, '0'); // 获取日期return `${year}-${month}-${day}`; // 返回格式化后的字符串
};/*** 日期选择框改变事件* @param val*/
const dateChange = (val: any) => {const startDate = formatDateToString(new Date(val[0]));const endDate = formatDateToString(new Date(val[1]));eventBus.emit('boardQuery', {startDate: startDate,endDate: endDate})
}

接收

const handleEvent = async (data: any) => {// data第一次拿的是默认值，后续如果dateChange函数触发，data就是mitt传来的const param = {startDate: data.startDate,endDate: data.endDate,};// 自己的功能await loadData(param);
};// 获取当前日期
const getCurrentDate = (): string => {const today = new Date();return today.toISOString().slice(0, 10); // 获取格式为 yyyy-MM-dd
};// 计算一个月前的开始日期
const getStartMonth = (): string => {const today = new Date();const oneMonthAgo = new Date(today);oneMonthAgo.setMonth(today.getMonth() - 1); // 获取一个月前的日期return oneMonthAgo.toISOString().slice(0, 10); // 获取格式为 yyyy-MM-dd
};onMounted(() => {const startDate = getStartMonth()const endDate = getCurrentDate()handleEvent({startDate: startDate,endDate: endDate})eventBus.on('boardQuery', handleEvent);
})// 在页面销毁时取消监听，防止内存泄漏
onUnmounted(() => {eventBus.off('boardQuery', handleEvent);
});

打印的结果：
{"startDate": "2025-07-10","endDate": "2025-08-06"
}