Vue自定义事件不直接实现蓝牙连接，而是用于组件间传递蓝牙操作结果；子组件调用Web Bluetooth API完成扫描或连接后通过$emit('connected', {device, batteryLevel})通知父组件，父组件监听@connected事件并处理，还可扩展@scan-start、@device-found、@disconnected等语义化事件，所有事件采用kebab-case命名，且需注意Web Bluetooth仅支持HTTPS/localhost及Chrome/Edge/Opera等浏览器。
Vue 自定义事件本身不直接实现蓝牙连接，而是用来在组件间传递蓝牙操作的结果和状态。比如子组件负责调用 Web Bluetooth API 完成设备扫描或连接，连接成功后通过 $emit 通知父组件“已连上”，父组件再更新 UI 或触发后续逻辑。
蓝牙连接完成后用自定义事件通知父组件
子组件（如 BleConnector.vue）执行连接流程，并在成功后触发事件：
- 调用
navigator.bluetooth.requestDevice()打开系统选择框 - 连接成功后获取 GATT server、service 和 characteristic
- 调用
this.$emit('connected', { device, batteryLevel })向上抛出数据
父组件监听并响应蓝牙连接事件
父组件在模板中绑定事件，在方法中处理结果：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 写法：
<BleConnector @connected="onDeviceConnected" /> - 在
methods中定义onDeviceConnected(payload) - 可据此更新页面状态（如显示设备名、启用拍照按钮）、启动特征值订阅等
配合蓝牙状态管理提升体验
除了基础连接通知，还可封装更多语义化事件：
立即学习“前端免费学习笔记（深入）”；
-
@scan-start：开始扫描时触发，用于显示加载动画 -
@device-found：每发现一个设备就 emit 一次，用于实时更新设备列表 -
@disconnected：断开后通知，便于清理资源或重置 UI - 所有事件都保持 kebab-case 命名，避免大小写混淆
注意浏览器与平台限制
Web Bluetooth API 仅在安全上下文（https:// 或 localhost）下可用，且目前仅 Chrome、Edge、Opera 支持。移动端 Safari 不支持，Android/iOS 的 WebView 也基本不可用。若需跨平台兼容，建议搭配 uni-app + 原生插件方案，此时仍可用自定义事件统一暴露连接结果。
