Vue事件监听的几种方式-这可是-需要触发事件的组件里用$emit方法
Vue事件监听的几种方式
Vue中监听事件的方式有很多，下面我会用通俗易懂的方式，一步一步告诉你怎么用。
一、使用v-on指令
这可是Vue中最常用的方法了，简单来说就是直接在模板里给元素绑定事件。
- 在模板里用v-on指令绑定事件。
- 在Vue组件的methods对象里定义事件处理函数。
举个例子：
``` ```这样当按钮被点击时，就会调用handleClick方法，然后在控制台输出“按钮被点击了”。
二、使用$on方法
$on方法是在组件实例上监听自定义事件的一个好方法。
- 用$emit方法触发自定义事件。
- 用$on方法监听自定义事件。
来看看代码示例：
``` this.$on('customEvent', () => { console.log('自定义事件被触发了'); }); ```当用户点击按钮时，这个方法会被触发，控制台会显示“自定义事件被触发了”。
三、使用自定义事件
自定义事件主要用于父子组件之间的通信。
- 在子组件里用$emit方法触发事件。
- 在父组件里用v-on指令监听子组件触发的事件。
子组件示例：
``` ```父组件示例：
```点击按钮后，父组件会收到通知，并调用handleNotify方法，控制台会显示“父组件接收到通知”。
四、事件总线
事件总线就像一个中央事件中心，用于管理组件之间的通信。
- 创建一个事件总线。
- 需要触发事件的组件里用$emit方法。
- 需要监听事件的组件里用$on方法。
事件总线示例：
``` // 事件总线 const EventBus = new Vue(); // 触发事件的组件 EventBus.$emit('busEvent', '总线事件被触发了'); // 监听事件的组件 EventBus.$on('busEvent', (message) => { console.log(message); }); ```点击按钮后，控制台会显示“总线事件被触发了”。
Vue中监听事件的方法有v-on指令、$on方法、自定义事件和事件总线。这些方法都很实用，可以根据具体需求选择合适的方法。合理使用这些方法，可以让你的Vue应用更加灵活和高效。