事件传递

Component 和 UIComponent 之间的通信是通过 fireEvent 来实现的。在一端通过 this.fireEvent 触发一个事件,然后在另一端通过 事件名 方法来接收这个事件。fireEvent 的参数为一个对象,必须包含 eventName 这个参数来指定事件名,其余参数为需要传递的数据。

需要注意的是,通信时对于事件名有一定要求。

  • Component -> UIComponent:bindSomethingHappend
  • UIComponent -> Component:onSomethingHappend
代码节选自:Component /src/componets/test/index.js
import { Component } from "@qnpm/yis";

export default class Test extends Component {
    displayName = "Test";

    doSomething() {
        this.fireEvent({ // 发送:Component -> UIComponent
            eventName: 'bindSomethingHappend',
            propA: 'some',
            propB: 'info'
        });
    }

    onSomethingHappend(data) { // 接收:UIComponent -> Component
        console.log(data);
    }

    render() { }
}
代码节选自:UIComponent /src/componets/test/browser.js
import { UIComponent } from '@qnpm/yis';

@YISComponent.UI('Test')
export default class Test extends UIComponent {
    doSomething() {
        this.fireEvent({ // 发送:UIComponent -> Component
            eventName: 'onSomethingHappend',
            propA: 'some',
            propB: 'info'
        });
    }

    bindSomethingHappend(data) { // 接收:Component -> UIComponent
        console.log(data);
    }
}