二开与交互通信

有的时候，主要的设置都在交互中，只有少量的逻辑需要在二开中处理，有的时候二开需要复用一些交互中已有的功能。那么二开代码就需要和交互进行通信，这里我们也有一个示例来看下二开与交互的通信具体如何处理：

1.交互向二开代码发送事件

首先我们在交互中设置向已经挂载了二开代码的组件发送一个事件 customEvent

然后在代码中监听这个事件

export class Button {
  init() {
    this.element.addEventListener("customEvent", () => {
      console.log("收到自定义事件");
    });
  }
}

点击之后，可以看到打印出了调试信息：

2.二开代码向交互发送事件

我们在二开代码中也可以直接发送事件到交互中，首先我们在前面的代码中添加事件发送的代码:

export class Button {
  init() {
    this.element.addEventListener("customEvent", () => {
      this.element.emit("anotherEvent");
    });
  }
}

可以看到这里我们简单起见，直接给自己发送了另一个事件 anotherEvent，那么在当前组件的交互中可以监听这个事件，然后做一些处理：

3.二开代码间收发事件

值得注意的是 addEventListener 和 emit 这两个方法来进行事件的监听和发送也可以直接在两个二开代码之间进行，注意这里一定要先手动在 Button1 中将二开代码生成的元素属性设置成 Button2：

两个按钮分别的二开代码如下：

export class Button1 {
  button2 = Element.empty();
  init() {
    this.element.addEventListener("click", () => {
      this.button2.emit("customEvent");
    });
  }
}

export class Button2 {
  init() {
    this.element.addEventListener("customEvent", () => {
      console.log("接收到了自定义事件");
    });
  }
}