render-remote-component-in-vue

render-remote-component-in-vue - 在vue中渲染远程的vue2/vue3/react组件

<template>
  <RenderRemoteComponent
    :remoteOptions="remoteOptions"
    v-bind="componentProps"
  />
</template>

import RenderRemoteComponent from 'render-remote-component-in-vue'
export default {
  components: {
    RenderRemoteComponent,
  },
  data() {
    return {
      remoteOptions: {
        // 组件名称
        name: 'xxx',
        // 用于渲染的沙箱模式 - 可选项为 false|iframe|shadow
        sandbox: 'shadow',
      },
      componentProps: {

      },
    }
  },
}

// 全局重置渲染加载状态的方式 - 将渲染方法挂载在组件实例上
RenderRemoteComponent.methods.renderLoading = function() {
  return this.h2('center', '加载中')
}
RenderRemoteComponent.methods.renderError = function(error) {
  return this.h2('center', '组件加载失败')
}

// 临时重置渲染加载状态的方式 - 将渲染方法在remoteOptions上传递
const remoteOptions = {
  name: 'xxx',
  renderLoading() {
    return this.h2('center', '加载中')
  }
  renderError(error) {
    return this.h2('center', '组件加载失败')
  }
}