事件订阅/发布

该机制允许自定义组件在上下文环境中进行事件的订阅与发布。

用法

自定义组件之间相互通讯-自定义事件

// comp_A.vue
<template>
    <div>comp_A</div>
</template>
<script>
export default {
    created() {
        this.$emit.on('sayHello', () => {
            alert('hello world');
        })
    }
}
</script>

// comp_B.vue
<template>
    <div>comp_B</div>
</template>
<script>
export default {
    created() {
        this.$emit.emit('sayHello')
    }
}
</script>

自定义组件和上下文之间相互通讯-系统事件

自定义组件只能发布系统事件，无法去订阅系统事件

例如：以下自定义组件会被配置到详情页布局中

<template>
    <div>自定义组件</div>
</template>
<script>
export default {
    methods: {

        //触发整个详情页刷新
        refresh () {
            this.$context.emitSystem('refresh');
        },

        //触发整个详情页关闭
        close() {
            this.$context.emitSystem('close');
        }
    }
}
</script>

API

on(eventName, handler)

参数：

• eventName: String：事件名
• handler: Function：事件处理函数

用法：

订阅自定义事件

this.$context.on(eventName, handler);

emit(eventName, [data])

参数：

• eventName: String：事件名
• [data]: *：事件数据

用法：

发布自定义事件

this.$context.emit(eventName, data);

emitSystem(eventName, [data])

参数：

• eventName: String：事件名
• [data]: *：事件数据

用法：

发布系统事件

this.$context.emitSystem(eventName, data);

上下文系统事件

以下是所有上下文支持的系统事件，开发人员自行查阅。

对象详情

refresh

用法：

通知详情页刷新。

this.$context.emitSystem('refresh', {
    dataId: '',
    apiName: '',
    isRefreshList: false,
    noTrigger: false
});

prev

用法：

展示上一条数据。

this.$context.emitSystem('prev');

next

用法：

展示下一条数据。

this.$context.emitSystem('next');

fullScreen

用法：

详情页全屏显示。

this.$context.emitSystem('fullScreen');

scrollTo

用法：

滚动到目标元素的位置。

this.$context.emitSystem('scrollTo', dom);

layout

用法：

详情页展开还是收起右侧区域。

this.$context.emitSystem('layout', true);

hide

用法：

隐藏详情页。

this.$context.emitSystem('hide');