vue中全屏状态广播需监听原生fullscreenchange事件并同步响应式状态，再通过emit、provide/inject或vueuse的usefullscreen实现跨组件通知。
Vue 自定义事件本身不直接广播全屏状态变化，因为 fullscreenchange 是原生浏览器事件，属于 document 全局事件，不是 Vue 实例或组件 emit 的事件。所谓“自定义事件处理全屏状态改变”，本质是：在监听原生 fullscreenchange 的基础上，用 Vue 的响应式机制（如 ref）同步状态，并通过 emit 或 provide/inject 等方式向子组件或兄弟组件主动通知——这才是你真正需要的“事件广播”逻辑。
监听原生 fullscreenchange 并同步响应式状态
这是所有后续广播的前提。必须在组件挂载时监听，卸载时清理：
- 使用
onMounted添加document.addEventListener('fullscreenchange', handler) - 在 handler 中读取
document.fullscreenElement判断是否处于全屏，并更新一个响应式 ref（例如isFullscreen = ref(false)） - 使用
onUnmounted移除监听器，避免内存泄漏
通过 emit 向父组件广播状态变更
适用于父子通信场景。子组件封装了全屏控制逻辑，父组件需要感知状态变化：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 子组件定义
const emit = defineEmits(['fullscreen-change']) - 在
fullscreenchange回调中调用emit('fullscreen-change', isFullscreen.value) - 父组件用
@fullscreen-change="handleFullscreenChange"接收并响应
用 provide/inject 实现跨层级广播
当多个嵌套子组件都需要响应全屏状态（比如工具栏、弹窗、图表），推荐在顶层布局组件中 provide 一个响应式状态和更新函数：
- 顶层组件：
provide('fullscreenState', { isFullscreen, toggleFullscreen }) - 任意子组件：
const { isFullscreen, toggleFullscreen } = inject('fullscreenState') - 这样所有注入该对象的组件都能自动响应
isFullscreen的变化，无需手动 emit
配合 VueUse useFullscreen 简化广播逻辑
@vueuse/core 的 useFullscreen 已内置状态响应式与事件同步，可直接用于广播基础：
- 导入：
import { useFullscreen } from '@vueuse/core' - 调用：
const { isFullscreen, toggle } = useFullscreen() - 它返回的
isFullscreen是一个ShallowRef，任何使用它的组件都会自动响应变化 - 如需进一步广播（例如发消息给 Pinia 或触发全局事件），可在
watch(isFullscreen, ...)中执行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
