render-remote-component

render-remote-component - 渲染远程的vue2/vue3/react组件

用法

在vue2、vue3中使用

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

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

或

<template>
  <RenderRemoteComponent
    remoteOptions="xxx?sandbox=shadow"
    v-bind="componentProps"
  />
</template>

import {inVue as RenderRemoteComponent} from 'render-remote-component'
export default {
  components: {
    RenderRemoteComponent,
  },
  data() {
    return {
      componentProps: {
        id: 'aaa'
      },
    }
  },
}

在js中直接使用

import {inDom as render} from 'render-remote-component'
const {setProps, dispose, refresh} = render('xxx?sandbox=shadow', document.body, {
  props: {
    id: 'aaa'
  }
})

在vue2、vue3中重置加载状态及错误状态的方法

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

或

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