Vue 微前端&微服务解决方案， Genesis 对远程组件进一步的设计和思考

对远程组件进一步的设计和思考

远程组件，是 Genesis 提出的一个概念，它是指通过接口，调用一个另一个服务的组件，它可以是一个按钮、一个模块或者一个页面。

嵌入式调用

除了嵌入图片、视频之类的，在日常开发，嵌入调用最多的还是 iframe。
而远程组件，可以让你在服务端、客户端都能无缝的嵌入另外一个服务的页面。
如下图：

它的使用方式是这样子

<template>
    <remote-view :id="1000" @myEvent="onMyEvent" :fetch="fetch" />
</template>
<script>
export default {
    methods: {
        fetch () {
            // 调用其它服务的组件
            const res = await axios.get('/api/ssr-服务名称/render?url=/demo');
            if (res.status === 200) {
                return res.data;
            }
            return null
        },
        onMyEvent () {
            // 处理远程组件的事件
        }
    }
}
</script>

API 形式调用

假设你有这样的一个弹框
如下图：