vuvivian's blog

越努力,越幸运.

  1. 1. 小部件之间的通信

小部件之间的通信

有许多组件之间的通信方式

  • 从父级到它的子级
    一个简单的例子。父不见可以简单的调用子部件方法:
    this.someWidget.update(someInfo);
  • 从一个小部件到它的父/某个祖先
    在这种情况下,小部件的工作只是通知其环境发生了什么事情。由于我们不希望小部件具有对其父部件的引用(这将使小部件与其父部件的实现相结合),因此继续操作的最佳方法通常是使用触发器trigger_up方法触发一个事件,该事件将冒泡到组件树中:
    this.trigger_up('open_record', { record: record, id: id});
    此事件将在小部件上触发,然后将冒泡并最终被某些上游小部件捕获:
1
2
3
4
5
6
7
8
9
10
var SomeAncestor = Widget.extend({
custom_events: {
'open_record': '_onOpenRecord',
},
_onOpenRecord: function (event) {
var record = event.data.record;
var id = event.data.id;
// do something with the event.
},
});
  • 交叉组件
    通过总线可以实现跨组件通信。这不是首选的通信形式,因为它有使代码难以维护的缺点。但是,它具有分离组件的优势。在这种情况下,这只是通过触发和监听总线上的事件来完成的。例如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// in WidgetA
var core = require('web.core');

var WidgetA = Widget.extend({
...
start: function () {
core.bus.on('barcode_scanned', this, this._onBarcodeScanned);
},
});

// in WidgetB
var WidgetB = Widget.extend({
...
someFunction: function (barcode) {
core.bus.trigger('barcode_scanned', barcode);
},
});

在本例中,我们使用web.core导出的总线,但这不是必需的。可以为特定目的创建总线。

本文最后更新于 天前,文中所描述的信息可能已发生改变