Vue組件中，可以使用?$emit，$on，$off?分別來分發、監聽、取消監聽事件實現組件通信，比較方便；

最近空閑時間手擼代碼實現了發布訂閱模式，可以進行組件通信。

話不多說，直接上代碼

/*** Created by laichengliang on 2021/04/13.*/const center = {}// 事件監聽 center.on = (eventName, callback) => {if (!center[eventName]) center[eventName] = []// 保存回調函數center[eventName].push(callback) }// 事件觸發 center.emit = (eventName, params) => {// 取出對應事件的回調函數const callbackArr = center[eventName]// 一一調用每一個回調事件callbackArr.map(callback => callback(params)) }// 事件移除 center.off = (eventName, callback) => {// 情況1：只傳eventName，移除所有事件// 情況2：傳eventName和callbackif (!callback) {center[eventName] = null} else {const callbackArr = center[eventName]// 刪除指定的callback回調const result = callbackArr.filter(callbackItem => callback !== callbackItem)// 重新賦值center[eventName] = result} }export default center

?

總結

以上是生活随笔為你收集整理的发布订阅模式 仿写Vue事件监听手写js实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。