业务组件如何做到跨框架通用?

首先,不管用什么框架写的组件,在接入另外一个框架时,需要一个包裹组件来完成,而这个包裹组件必须是使用当前被接入项目所使用的框架编写。感觉有点绕?那举个栗子:比如接入的项目是用react写的,那这个包裹组件必须是react编写的。

然后,再来看,这个包裹组件一般需要处理哪些问题,才能衔接2个不同的框架。

以vue业务组件接入react项目为例

首先,vue组件依赖vue,首先确保包裹组件初始化,需要有vue库,如果没有,需要进行异步加载,加载完毕,再进行vue初始化,挂载该vue业务组件到vue实例上。

其次,核心也在于此,如何将react包裹组件接收的参数传给vue组件。熟悉react和vue的api的知道,react的props参数都是一种写法,不同的是参数的类型。vue的props参数写法主要分2类,一类是bind(绑定),一类是on(监听事件)。v-on支持events以对象的形式传入,因此,包裹组件初始化,只需要将事件类的props拎出来,通过指令v-on传入vue组件。(初始化配置项:el, data, components, template)。

最后,记得处理props更新和组件卸载的情况即可。

 initVueInst = () => {
    this.vueInst = new Vue({
      el: this.domRef.current,
      data: {
        props: {...this.props},
        events: this.getEvents(this.props)
      },
      components: {
        Container
      },
      template: `<Container v-bind="props" v-on='events' />`,
    });
  }

那么同理,react写的业务组件如何接入vue项目中呢?

核心是vue组件具备的vm.$listeners和vm.$attrs接口。通过这2个接口,就可以把vue组件上的事件和属性,都给到react组件上。实现透传。这里在vue项目中,一般不能使用jsx语法,这个时候就需要使用react的api,React.createElement来替代jsx。

这种方式的弊端

暂时对于组件传children的情况,适配不了,需要有个转换过程,比较复杂。具体来说,react的chidren和vue的slots,他们的数据结构是不同的,不能直接跨框架使用。