在JavaScript中，BroadcastChannel是一个用于在同一个源（origin）下的不同浏览器窗口、标签页或iframe之间发送和接收消息的API。它允许你创建一个BroadcastChannel对象，并通过这个对象发送和接收消息
// sync-msg：广播频道名称可自定义
const channel = new BroadcastChannel('sync-msg'); // 创建一个广播频道
/**
* @param {"add", "remove", "updated"} type
* @param {any} msg
* @return {*}
*/
export function sendMsg (type, msg) {
channel.postMessage({ type, msg }); // 向频道发送消息
}
/**
* @param {any} callback
* @return {*}
*/
export function listenMsg (callback) {
const handler = (e) => {
callback && callback(e.data); // 处理接收到的消息
}
channel.addEventListener('message', handler); // 监听频道消息
return () => {
channel.removeEventListener('message', handler); // 取消监听
}
}
例如有一个表格，有增加和编辑
主页面有个表格
import { listenMsg } from '../utils/crossTagMsg';
const unlisten = listenMsg((res) => {
if (res.type === 'add') {
this.dataArr.unshift(res.msg)
} else {
const index = this.dataArr.findIndex(item => item.id === res.msg.id);
this.dataArr.splice(index, 1, res.msg)
}
})
onUnmounted(unlisten)
增加
import { sendMsg} from '../utils/crossTagMsg';
handleAdd() {
sendMsg('add', { id: 3, name: '小明' })
}
编辑
import { sendMsg} from '../utils/crossTagMsg';
handleAdd() {
sendMsg('updated', { id: 1, name: '李四' })
}
