【odoo15】解读前端this.trigger()、this.trigger_up()、bus()的事件处理机制

概要

        在Odoo 15的前端开发中，this.trigger()、this.trigger_up() 和 bus 是三种常见的事件处理机制。它们在不同的上下文中使用，适用于不同的场景。

内容

this.trigger()

 作用：

用于在当前对象或组件上触发一个事件。该事件只会在当前对象或组件的上下文中被监听和处理。

使用方式：

//监听事件
this.on('event_name', this, this._onTypingMessageAdded);
或
this.el.addEventListener('event_name', this.refresh_select_line_id.bind(this));
或
custom_events: Object.assign({}, KanbanController.prototype.custom_events, {
    event_name: '_onBarcodeScannedHandler',
}),
//调用
this.trigger('event_name', {param1: value1, param2: value2});

使用场景：

适用于在当前组件内部的事件通信。例如，当一个组件的某部分状态发生变化时，需要通知组件的其他部分进行相应的更新。

this.trigger_up()

 作用：

用于向父组件或父对象触发一个事件。该事件会沿着组件树向上冒泡，直到到达顶层组件或被某个中间组件处理。

使用方式：

//监听事件
custom_events: _.extend({}, FormController.prototype.custom_events, {
    activeBarcode: '_barcodeActivated',
})
//调用
this.trigger_up('activeBarcode', {
    name: this.name,
    commands: {
        barcode: '_barcodeAddX2MQuantity',
    }
});

使用场景：

用于在组件层级之间的事件通信。例如，当一个子组件需要通知父组件某个事件（如用户操作）发生时，可以使用 this.trigger_up() 将事件向上传播，让父组件处理该事件。

bus()

 作用：

一个全局事件总线（event bus），用于在不同组件或模块之间进行通信。通过 bus，你可以在应用的不同部分之间发送和接收事件。（类似订阅事件）

使用方式：

import core from 'web.core';
//订阅事件
mounted() {
    core.bus.on('add_move_lines', this, this.onAddRecordOpenDialog);
}
//取消订阅
willUnmount() {
    core.bus.off('add_move_lines', this, this.onAddRecordOpenDialog);
}
//触发
core.bus.trigger('add_move_lines', value.ids);

使用场景：

用于在应用程序的全局范围内进行通信。例如，在不同模块之间传递信息，或在应用的不同部分之间广播全局事件。

注：trigger跟trigger_up用法其实大同小异，但是bus在组件卸载时记得取消订阅，不然容易导致内存泄漏等问题。

小结

        多写多敲多思考，毕竟，知己知彼才能看懂源码。

Tip：本人才学尚浅，如有纰漏，还请不吝赐教！