Vue 中 emit、on、once、off 的理解？

在 Vue 中，$emit、$on、$once 和 $off 是用于自定义事件处理的方法，通常用于父子组件之间或组件内部的事件通信。

$emit：

• $emit(eventName, [args])： 用于在组件内部触发自定义事件。它允许在组件内部触发一个事件，并且可以传递参数。通常在子组件中使用，用来向父组件发送消息。

// 在子组件中触发自定义事件
this.$emit('customEvent', data);

$on：

• $on(eventName, callback)： 用于在组件实例上监听特定事件的触发。当触发相应的自定义事件时，该事件将会被捕获并执行回调函数。

// 在组件实例中监听自定义事件
this.$on('customEvent', (data) => {
  // 处理接收到的数据
});

$once：

• $once(eventName, callback)： 与 $on 类似，但是它只监听一次特定的事件。当事件被触发并执行了回调函数后，该监听器将被自动移除，不再接收后续相同事件的触发。

// 只监听一次自定义事件
this.$once('customEvent', (data) => {
  // 处理接收到的数据
});

$off：

• $off([eventName, callback])： 用于移除自定义事件的监听器。可以根据需要选择性地移除特定事件的特定监听器或移除所有监听器。

// 移除特定事件的特定监听器
this.off('customEvent', callback);

// 移除所有监听器
this.off();

这些方法使得 Vue 组件之间可以进行灵活的事件通信，通过自定义事件实现了组件间的解耦和通信。

Was this helpful?

YesNo

0 / 0