Vue 自定义事件怎么实现蓝牙设备连接的事件通知

夜雪酱_5143

夜雪酱_5143

2026-10-21

866人浏览

原创

vue自定义事件不直接实现蓝牙连接,而是用于组件间传递蓝牙操作结果;子组件调用web bluetooth api完成扫描或连接后通过$emit('connected', {device, batterylevel})通知父组件,父组件监听@connected事件并处理,还可扩展@scan-start、@device-found、@disconnected等语义化事件,所有事件采用kebab-case命名,且需注意web bluetooth仅支持https/localhost及chrome/edge/opera等浏览器。

vue 自定义事件怎么实现蓝牙设备连接的事件通知

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-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习