Vue的ubus emit/on使用

这段代码是 Vue.js 组件中的 mounted 生命周期钩子函数，主要作用是监听一个名为 “macSelectData” 的全局事件。具体行为如下：

---

分步解释：

1. mounted() 生命周期钩子
   当组件被挂载到 DOM 后，Vue 会自动调用 mounted() 方法。这里常用于初始化操作，比如数据请求、事件监听等。

2. this.$bus.on("macSelectData", this.open)

   • this.$bus：通常指通过 Vue 实例实现的事件总线（Event Bus），用于跨组件通信（非父子组件）。
   • .on("macSelectData", this.open)：监听名为 "macSelectData" 的自定义事件，当该事件被触发时，调用组件的 open 方法。

---

实际作用：

• 当其他组件或代码通过 this.$bus.emit("macSelectData", data) 触发事件时，当前组件的 open 方法会被调用，并可能接收到传递的 data 参数。
• 典型场景：比如一个 MAC 地址选择组件选中某个地址后，通过事件总线通知当前组件打开弹窗或更新数据。

---

潜在注意事项：

1. 内存泄漏风险
   如果组件销毁前未移除事件监听（需在 beforeDestroy 中调用 this.$bus.off("macSelectData", this.open)），可能导致重复监听或调用已销毁组件的方法。

2. 事件总线设计
   $bus 通常是全局 Vue 实例（如 new Vue()），需确保项目中已正确初始化事件总线。

---

示例流程：

// 组件 A 触发事件
this.$bus.emit("macSelectData", { mac: "00:1A:2B:3C:4D:5E" });// 当前组件（包含上述代码）的 open 方法被调用
methods: {open(data) {console.log(data.mac); // 输出 "00:1A:2B:3C:4D:5E"// 执行打开弹窗等操作}
}

如果需要进一步优化，建议添加事件监听的移除逻辑以避免潜在问题。