The original link (my blog yangfeng. Tech / 2021/05/19 /…

First, regardless of which framework a component is written in, when it is connected to another framework, it needs a wrapper component that is written using the framework currently used by the connected project. Feeling a little convoluted? For example, if the incoming project is written in React, the package component must be written in React.

Then, take a look at what issues this package component generally needs to deal with to connect the two different frameworks.

This section takes the vUE service component connecting to the React project as an example

First of all, vUE components depend on VUE. Ensure that the package components are initialized, and the VUE library is required. If not, asynchronous loading is required.

Second, the core is how to pass parameters received by the React package component to the VUE component. React/Vue API: The react props parameter is written in the same way. The props parameter of vue can be divided into two classes: bind (bind) and ON (listen event). V-on supports events to be passed in the form of objects. Therefore, to initialize the package component, you only need to lift the props of the event class and pass it to the VUE component with the command V-ON. Initialize configuration items: EL, data, Components, template.

Finally, remember to handle props updates and component unloads.

 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' />`}); }Copy the code

Similarly, how do business components written by React plug into vUE projects?

Listeners and VT.Listeners and VT.Listeners and VT.attrs interfaces are the core of the VUE component. The React component uses these two interfaces to transfer events and properties from the VUE component to the React component. Implement transparent transmission. The react API, react. CreateElement, is used instead of JSX.

The downside of this approach

For the time being, it cannot be adapted to the situation of component transmission to children, which requires a conversion process, which is quite complicated. Specifically, react chidren and Vue slots have different data structures that cannot be used directly across frameworks.