事件总线模块 ​

数据结构 ​

无

接口 ​

on ​

该方法注册事件监听。

完整方法声明：function on(event: string | Array<string>, callback: ESEventBusCallback, context?: ESEventBusContext): void

  • 参数：
参数描述类型非空
event需要监听的事件string | Array<string>是
callback事件处理函数ESEventBusCallback是
context上下文ESEventBusContext否
  • 返回值：
属性描述类型默认值
无无void

once ​

该方法注册一次事件监听。

完整方法声明：function once(event: string, callback: ESEventBusCallback, context?: ESEventBusContext): void

  • 参数：
参数描述类型非空
event需要监听的事件string是
callback事件处理函数ESEventBusCallback是
context上下文ESEventBusContext否
  • 返回值：
属性描述类型默认值
无无void

emit ​

该方法发送事件。

完整方法声明：function emit(event: string, ...args: ESEventBusArg[]): void

  • 参数：
参数描述类型非空
event需要发送的事件string是
...args事件的参数ESEventBusArg[]是
  • 返回值：
属性描述类型默认值
无无void

off ​

该方法取消监听事件。

完整方法声明：function off(event?: string | Array<string>, callback?: ESEventBusCallback): void

  • 参数：
参数描述类型非空
event需要监听的事件string | Array<string>否
callback事件处理函数ESEventBusCallback是
  • 返回值：
属性描述类型默认值
无无void

发送事件 ​

  • 代码示例：
    点击查看源码
    vue
    <template>
	<div class='es-sdk-root-css'>
		<s-title-view class='es-sdk-content-title-css' :text='this.$options.name' />
		<div class='es-sdk-content-divider-css' />
		<div class='es-sdk-content-row-css'>
			<s-text-button text='发送事件' @onButtonClicked='onButtonClicked' />
		</div>
	</div>
</template>

<script lang='ts'>

import {defineComponent} from '@vue/runtime-core';
import {useESEventBus} from '@extscreen/es3-core';

const TAG = 'ESEventBus';

export default defineComponent({
	name: '发送事件',
	setup() {
		const eventbus = useESEventBus();

		function onButtonClicked() {
			eventbus.emit('EventBusEventD', 'D事件##########' + new Date().getTime());
		}

		return {
			onButtonClicked,
		};
	},
});

</script>

<style>
</style>

监听事件 ​

  • 代码示例：
    点击查看源码
    vue
    <template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <s-text-view :text="textRef"/>
      <s-text-button text="发送事件" @onButtonClicked="onButtonClicked"/>
      <s-text-button text="打开发送D事件页面" @onButtonClicked="onDEventButtonClicked"/>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, ref} from "@vue/runtime-core";
import {useESRouter} from "@extscreen/es3-router";
import {useESEventBus} from "@extscreen/es3-core";

const TAG = 'ESEventBus'

export default defineComponent({
  name: '监听事件',
  setup() {
    const textRef = ref("")
    const router = useESRouter()

    const eventbus = useESEventBus()

    const onESCreate = (params) => {
      eventbus.on('EventBusEventA', onEvent)
      eventbus.on('EventBusEventD', onEvent)
    }

    function onEvent(event) {
      textRef.value = event
    }

    function onButtonClicked() {
      eventbus.emit('EventBusEventA', 'A事件' + new Date().getTime())
    }

    function onDEventButtonClicked() {
      router.push({
        name: 'eventbus/es_eventbus_emit_page',
      });
    }

    return {
      textRef,
      onESCreate,
      onButtonClicked,
      onDEventButtonClicked
    }
  },
});

</script>

<style>
</style>

取消监听事件 ​

  • 代码示例：
    点击查看源码
    vue
    <template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <s-text-view :text="textRef"/>
      <div class="es-sdk-content-row-css">
        <s-text-button text="监听事件" @onButtonClicked="onOnButtonClicked"/>
        <s-text-button text="取消注册事件" @onButtonClicked="onOffButtonClicked"/>
        <s-text-button text="发送事件" @onButtonClicked="onEmitButtonClicked"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, ref} from "@vue/runtime-core";
import {useESEventBus} from "@extscreen/es3-core";

const TAG = 'ESEventBus'

export default defineComponent({
  name: '取消注册事件',
  setup() {
    const eventbus = useESEventBus()
    const textRef = ref("")

    const onESCreate = (params) => {

    }

    function onOnButtonClicked() {
      eventbus.on('EventBusEventB', onEvent)
    }

    function onOffButtonClicked() {
      eventbus.off('EventBusEventB', onEvent)
    }

    function onEmitButtonClicked() {
      eventbus.emit('EventBusEventB', 'B事件' + new Date().getTime())
    }

    function onEvent(event) {
      textRef.value = event
    }

    return {
      textRef,
      onESCreate,
      onOnButtonClicked,
      onOffButtonClicked,
      onEmitButtonClicked
    }
  },
});

</script>

<style>
</style>

监听一次事件 ​

  • 代码示例：
    点击查看源码
    vue
    <template>
  <div class="es-sdk-root-css">
    <s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
    <div class="es-sdk-content-divider-css"/>
    <div class="es-sdk-content-column-css">
      <s-text-view :text="textRef"/>
      <div class="es-sdk-content-row-css">
        <s-text-button text="监听一次事件" @onButtonClicked="onOnButtonClicked"/>
        <s-text-button text="发送事件" @onButtonClicked="onEmitButtonClicked"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, ref} from "@vue/runtime-core";
import {useESEventBus} from "@extscreen/es3-core";

const TAG = 'ESEventBus'

export default defineComponent({
  name: '监听一次事件',
  setup() {
    const eventbus = useESEventBus()
    const textRef = ref("")

    const onESCreate = (params) => {

    }

    function onOnButtonClicked() {
      eventbus.once('EventBusEventC', onEvent)
    }

    function onEmitButtonClicked() {
      eventbus.emit('EventBusEventC', 'C事件' + new Date().getTime())
    }

    function onEvent(event) {
      textRef.value = event
    }

    return {
      textRef,
      onESCreate,
      onOnButtonClicked,
      onEmitButtonClicked
    }
  },
});

</script>

<style>
</style>