vue $on

作者：昨夜的风发布日期:2026-06-09 浏览:116

// Vue 实例之间的事件通信使用 $on 方法来监听事件，$emit 方法来触发事件。

// 创建一个 Vue 实例作为事件总线（Event Bus）
const bus = new Vue();

// 组件 A 发出事件
bus.$emit('id-selected', 1);

// 组件 B 监听事件
bus.$on('id-selected', function (id) {
  console.log(id); // 输出: 1
});

// 解释说明：
// 1. `bus.$on('id-selected', callback)`：在组件 B 中监听名为 'id-selected' 的事件，当该事件被触发时执行回调函数。
// 2. `bus.$emit('id-selected', 1)`：在组件 A 中触发名为 'id-selected' 的事件，并传递参数 1。
// 3. 通过这种方式，可以实现组件之间的通信，尤其是在没有父子关系的组件之间。

上一篇：vue3遍历数组

下一篇：vue tailwindcss