Gia：如何通过事件总线将事件对象传递给处理程序

Question

我正在学习如何使用 Gia（对于小型 Web 项目），我无法了解如何通过 Gia 的事件总线将事件对象从一个组件传递到另一个组件的事件处理程序。

下面是两个基本组件，通过事件总线进行通信：

class navigation extends Component {

  constructor(element) {

    super(element);

    //

    // Define "Sub-components"

    this.ref = {

      navLinks: [],

    };

  }

  mount() {

    //

    // Listen for clicks on nav.-links

    for (let i = 0; i < this.ref.navLinks.length; i++) {

      const link = this.ref.navLinks[i];

      link.addEventListener("click", this.handleNavLinkClick.bind(this));

    }

  }

  handleNavLinkClick(e) {

    //

    // Emit event

    let clickedLink = e.target;

    if (clickedLink.classList.contains("callHeader")) {

      eventbus.emit("callingSubpageHeader");

    }

  }

}

class subpageHeader extends Component {

  mount() {

    //

    // Listen for call from eventbus

    eventbus.on(

      "callingSubpageHeader",

      this.handleEventBusCall_callHeader.bind(this)

    );

  }

  //

  // Eventbus handler(s)

  handleEventBusCall_callHeader() {

    console.log("The subpage-header was called.");

  }

}

事件的发出和第二个组件中处理程序的后续调用工作正常。但是，我想在调用处理程序时将其他信息从第一个组件传递到第二个组件。Gia 文档提到事件总线的 emit 方法可以将事件对象传递给处理程序：

调用以前使用相同事件名称注册的任何处理程序。可选事件对象可用作参数，该参数作为参数传递到处理程序中。

eventbus.emit('eventName'[, eventObject]);

不幸的是，没有示例，我不知道传递对象是如何工作的。我尝试将“某物”（在本例中为第一个组件中单击的链接）添加到 emit 函数的调用中，但不知道如何/在哪里可以读取/使用它，也不知道将某些内容作为事件传递对象是否以这种方式工作：

class navigation extends Component {

  constructor(element) {

    super(element);

    //

    // Define "Sub-components"

    this.ref = {

      navLinks: [],

    };

  }

  mount() {

    //

    // Listen for clicks on nav.-links

    for (let i = 0; i < this.ref.navLinks.length; i++) {

      const link = this.ref.navLinks[i];

      link.addEventListener("click", this.handleNavLinkClick.bind(this));

    }

  }

  handleNavLinkClick(e) {

    //

    // Emit event

    if (clickedLink.classList.contains("callHeader")) {

      eventbus.emit("callingSubpageHeader", [e.target]);

    }

  }

}

如果有人能解释在这种情况下传递事件对象的概念和语法，那就太好了。

Answer 1

事件处理程序将事件中的对象作为参数传递，因此您的处理程序可以从其函数签名中获取该对象作为变量，如下所示：handleEventBusCall_callHeader(target)&nbsp;{ &nbsp;&nbsp;console.log("The&nbsp;subpage-header&nbsp;was&nbsp;called."); }事件处理程序中的变量现在等于随事件传递的对象。target当你调用事件时，你不需要把你的参数放进去，那只会在传递它之前把它放到一个数组中，这会在以后让你头疼。文档中的括号仅显示 的第二个参数是可选的。[]eventbus.emit