Vue component bridging method based on React high-order component
By encapsulating Vue components in the React environment and utilizing higher-order functions and lifecycle methods, cross-framework component props synchronization, event propagation, and lifecycle management are achieved, resolving compatibility issues in React and Vue integration and improving the efficiency and stability of cross-framework integration.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- BEIJING BAILONG MAYUN TECH CO LTD
- Filing Date
- 2026-01-28
- Publication Date
- 2026-05-08
AI Technical Summary
Existing technologies for cross-framework integration between React and Vue suffer from issues such as complex props passing, inconvenient event listening, and asynchronous lifecycle management, leading to compatibility and performance problems.
By encapsulating Vue components with higher-order functions and creating React higher-order components as adapters, deep reactive synchronization of Props, automated encapsulation of event listeners, lifecycle synchronization, and instance reference forwarding are achieved, ensuring that Vue components are created, updated, and destroyed normally in the React environment and supporting deep component interaction.
It enables React developers to seamlessly use Vue components, solves problems such as complex props passing, inconvenient event listening, and asynchronous lifecycle management, and improves the efficiency and stability of cross-framework integration.
Smart Images
Figure CN121996221A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of front-end web development technology, and in particular to a Vue component bridging method based on React higher-order components. Background Technology
[0002] With the rapid development of front-end technologies and the increasing complexity of enterprise applications, modern web development often involves scenarios where multiple front-end frameworks coexist. React and Vue, as two mainstream front-end frameworks, each boast well-developed ecosystems and a large user base. In large projects or during gradual migrations, it's often necessary to introduce mature Vue-based components into a React-dominated technology stack. However, Vue and React differ fundamentally in component models, data response mechanisms, event systems, and lifecycle management, leading to compatibility issues when directly mixed.
[0003] Currently, common cross-frame integration solutions in the industry mainly include iframe embedding and WebComponents wrapping. The iframe embedding solution builds a Vue component as a complete HTML page and embeds it into the React application via the iframe tag. While achieving visual integration, it suffers from significant problems such as complex communication, high performance overhead, difficulty in style isolation, and a fragmented user experience. The WebComponents wrapping solution is currently the closest to existing technology, achieving rendering of Vue components in the React environment to a certain extent. However, it also has drawbacks such as complex props passing with weak type support, an unintuitive and limited event listening mechanism, asynchronous lifecycle management, and style isolation and conflict issues. Summary of the Invention
[0004] This application provides a Vue component bridging method based on React higher-order components to solve problems such as complex props passing, inconvenient event listening, and asynchronous lifecycle management in existing technologies.
[0005] The first aspect of this application provides a method for bridging Vue components based on React higher-order components, comprising the following steps: encapsulating the original Vue component through higher-order functions to obtain a standard encapsulated React component; providing a real DOM element as the mount point of the Vue component; creating and configuring a Vue instance in the encapsulated React component, mounting it to the mount point, and converting the React component's ReactProps into reactive data for Vue; injecting the reactive data into the Vue component and establishing a Props synchronization mechanism to achieve automatic data updates; mapping the event callback properties passed by the React component to the event listeners of the Vue component to complete the cross-framework transmission of events; and destroying the Vue instance when the React component is unloaded.
[0006] Optionally, the React component returned by the higher-order function includes the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods for managing the creation, updating, and destruction of Vue instances.
[0007] Optionally, in the componentDidMount lifecycle method, a Vue instance is created and configured, the current ReactProps are transformed into Vue's reactive data Props, and the watch mechanism is used to listen for changes in the current ReactProps to trigger a re-render of the Vue component.
[0008] Optionally, in the componentDidUpdate lifecycle method, the new reactive data Props are synchronized to the reactive data of the Vue instance, thereby automatically triggering the re-rendering of the internal Vue component.
[0009] Optionally, in the componentWillUnmount lifecycle method, the Vue instance is explicitly destroyed, releasing all resources it manages and unbinding all listeners.
[0010] Optionally, it also includes allowing React parent components to access internal Vue component instances via a ref mechanism.
[0011] Optionally, the mapping of the event callback properties includes: identifying property names in React component Props that begin with "on"; converting the identified property names into an event name format that Vue components can trigger; and creating a bridge function to call the callback function passed down from the React parent component when the Vue component triggers an event.
[0012] A second aspect of this application provides a Vue component bridging device based on React higher-order components, comprising: a component encapsulation module and a rendering and bridging module. The component encapsulation module provides higher-order functions that receive raw Vue components and encapsulate them into standard encapsulated React components that can be directly used in the React environment, enabling React developers to call Vue components declaratively using JSX syntax. The rendering and bridging module integrates a DOM container management submodule, a Vue instantiation and Props reactive synchronization submodule, an event handling bridging submodule, a lifecycle synchronization and resource cleanup submodule, and an instance reference forwarding submodule into the standard encapsulated React component. The DOM container management submodule provides a real DOM element as the Vue component. The component's mounting point; the Vue instantiation and Props reactive synchronization submodule is used to create and configure a Vue instance in the encapsulated React component, mount it to the mounting point, and convert the React component's ReactProps into Vue's reactive data; the event handling bridging submodule is used to inject the reactive data into the Vue component and establish a Props synchronization mechanism to achieve automatic data updates; the lifecycle synchronization and resource cleanup submodule is used to map the event callback properties passed by the React component to the Vue component's event listeners, complete the cross-framework event transmission, and destroy the Vue instance when the React component is unloaded; the instance reference forwarding submodule is used to allow the React parent component to obtain the internal Vue component instance through the ref mechanism.
[0013] A third aspect of this application provides a computer-readable storage medium having a computer program stored thereon, which is executed by a processor to implement a Vue component bridging method based on React higher-order components as described in the above embodiments.
[0014] A fourth aspect of this application provides a computer program product storing a computer program that, when executed by a processor, implements a Vue component bridging method based on React higher-order components as described in the above embodiments.
[0015] The beneficial effects of using the present invention are as follows: This application's embodiments achieve automatic and efficient data synchronization by creating a dedicated React higher-order component that acts as an adapter. Through a deep reactive synchronization mechanism using Props, it enables the React parent component to handle events emitted by Vue child components as if they were native React events. By synchronizing the lifecycle of the React component and its internal Vue instance, it ensures that Vue components are created, updated, and destroyed at the correct times, effectively preventing memory leaks. An instance reference forwarding mechanism allows the React parent component to directly call methods of Vue child components or access their state, enabling deep component interaction. This allows React developers to use Vue components declaratively via JSX syntax, directly passing Props and event callbacks, just like using a regular React component, without needing to worry about the differences in the underlying framework and complex conversion logic. Therefore, it solves the problems of complex Props passing, inconvenient event listening, and asynchronous lifecycle management in existing technologies.
[0016] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description
[0017] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein: Figure 1 This is a flowchart illustrating a Vue component bridging method based on React higher-order components, according to an embodiment of this application. Figure 2 This is a schematic diagram of a Vue component bridging method based on React higher-order components provided in an embodiment of this application; Figure 3 This is a schematic diagram of a Vue component bridging device based on React higher-order components provided in an embodiment of this application. Detailed Implementation
[0018] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.
[0019] The following describes a Vue component bridging method based on React Higher-Order Components (HOCs) according to an embodiment of this application, with reference to the accompanying drawings. Addressing the issues of complex Props passing, inconvenient event listening, and asynchronous lifecycle management mentioned in the background art, this application provides a Vue component bridging method based on React HOCs. In this method, a dedicated React HOC is created, acting as an adapter. Automatic and efficient data synchronization is achieved through a deep reactive synchronization mechanism using Props. An automated encapsulation mechanism for event listeners allows the React parent component to handle events emitted by Vue child components as if they were native React events. Synchronizing the lifecycles of the React component and the internal Vue instance ensures that Vue components are created, updated, and destroyed at the correct times, effectively preventing memory leaks. An instance reference forwarding mechanism allows the React parent component to directly call methods of Vue child components or access their state, achieving deep component interaction. This allows React developers to use Vue components declaratively via JSX syntax, just like using a regular React component, and directly pass Props and event callbacks, without needing to worry about the differences in the underlying framework and complex conversion logic. This solves the problems of complex Props delivery, inconvenient event listening, and asynchronous lifecycle management in existing technologies.
[0020] Specifically, Figure 1 This is a flowchart illustrating a Vue component bridging method based on React higher-order components, provided in an embodiment of this application.
[0021] like Figure 1 As shown, this method for bridging Vue components based on React higher-order components includes the following steps: In step S101, the original Vue component is encapsulated using a higher-order function to obtain a standard encapsulated React component.
[0022] Specifically, the higher-order function is VueInReact, whose core function is to act as an adapter between Vue components and the React environment. It receives the complete definition of the original Vue component (including templates, logic, styles, and other related configurations) as input parameters, and uses internal encapsulated logic to convert heterogeneous framework components into standard components that conform to the React specification, such as... Figure 2 As shown, the higher-order function VueInReact internally defines and returns a wrapper class VueComponentWrapper that inherits from React.Component. This wrapper class integrates all the core logic for subsequent Vue instance management, data synchronization, event bridging, etc., so that the output wrapped React component can be directly declared and used in the React environment without additional adaptation operations.
[0023] It is understood that the embodiments of this application realize the conversion of Vue components to React components through higher-order function encapsulation, shielding the differences of the underlying framework, allowing React developers to use Vue components in a familiar component calling way, and reducing the cost and difficulty of cross-framework integration.
[0024] In this embodiment of the application, the React component returned by the higher-order function includes the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods, which are used to manage the creation, updating, and destruction of Vue instances.
[0025] Among them, componentDidMount is responsible for the initialization and mounting of the Vue instance, componentDidUpdate is responsible for the synchronous update after the React Props change, and componentWillUnmount is responsible for the destruction and resource cleanup of the Vue instance. The three lifecycle methods form a closed-loop management of the entire lifecycle of the Vue instance.
[0026] Specifically, the three lifecycle methods correspond to the mounted, updated, and beforeDestroy phases of the Vue instance, ensuring that the state changes of the Vue instance are consistent with the lifecycle of the encapsulated React component, and avoiding problems such as instance creation failure, untimely data updates, or resource leaks.
[0027] It is understood that the embodiments of this application align the lifecycle methods of Vue instances with React lifecycle methods, thereby achieving cross-framework component lifecycle collaboration and providing a stable execution environment for subsequent data synchronization and event interaction.
[0028] In step S102, a real DOM element is provided as the mount point for the Vue component.
[0029] This DOM element is an independent container node, specifically designed to hold the rendering results of the Vue instance. It is isolated from other DOM elements in the React application to avoid rendering conflicts or style pollution.
[0030] Specifically, in the render method of the encapsulated React component, an empty div element is returned, and the setContainerRef method is bound using React's ref mechanism to save the DOM node reference of the div element to the containerRef instance property of the encapsulated component, forming a fixed mounting carrier exclusive to the Vue component.
[0031] It is understood that the embodiments of this application accurately obtain DOM node references through the ref mechanism, ensuring that the Vue instance can be accurately mounted to the specified location, providing the necessary DOM foundation for the rendering of Vue components in the React environment, while avoiding compatibility issues that may be caused by manual manipulation of the DOM.
[0032] In step S103, a Vue instance is created and configured in the encapsulated React component, mounted to the mount point, and the ReactProps of the React component are converted into reactive data of Vue.
[0033] In this embodiment of the application, a Vue instance is created and configured in the componentDidMount lifecycle method, the current ReactProps are transformed into Vue's reactive data Props, and the watch mechanism is used to listen for changes in the current ReactProps to trigger the re-rendering of the Vue component.
[0034] The Vue instance configuration includes core configurations such as creating a Vue parent container component, injecting reactive data, and binding event listeners. ReactProps includes all data passed from the React parent component, covering various types such as basic types, complex objects, arrays, and functions. The watch mechanism is set to deep listening mode, which can detect hierarchical changes in complex data structures such as nested objects and arrays in ReactProps, ensuring the integrity of data updates.
[0035] Specifically, a VueParentContainer object is created in the instance that encapsulates the React component. This object initializes ReactProps as Vue's reactive data Props through the data function, creates a virtual DOM for the target Vue component through the render function, binds reactive props and event listeners, and finally calls Vue's constructor to instantiate a Vue object and mounts it to the DOM node corresponding to containerRef through the $mount method.
[0036] Configure the `watch` property in the `VueParentContainer` object and set a handler callback function for `reactProps`. When any changes occur to `reactProps` (including modification of basic type values, changes to complex object properties, addition or deletion of array elements, etc.), the handler function will be triggered, thereby driving the Vue component to re-render according to the new props.
[0037] It is understood that the embodiments of this application ensure that the Vue instance is created only after the React component is mounted through the componentDidMount lifecycle method, avoiding mounting failure caused by DOM nodes not being ready. At the same time, the deep watch mechanism enables real-time awareness of ReactProps changes, ensuring the timeliness and accuracy of cross-framework data synchronization.
[0038] In step S104, reactive data is injected into the Vue component, and a Props synchronization mechanism is established to achieve automatic data updates.
[0039] In this embodiment, the new reactive data Props are synchronized to the reactive data of the Vue instance in the componentDidUpdate lifecycle method, thereby automatically triggering the re-rendering of the internal Vue component.
[0040] Reactive data injection refers to passing the reactProps of the Vue parent container as props to the target Vue component, enabling the Vue component to directly access and use this data. The Props synchronization mechanism refers to the logic that automatically synchronizes updated Props to the reactive data of the Vue instance.
[0041] Specifically, in the `componentDidUpdate` method, it first checks if the Vue instance has already been created to avoid null pointer exceptions. If the Vue instance already exists, it synchronizes the new props to the Vue instance's reactive data by directly assigning `this.vueInstance.reactProps={...this.props}`. When the props passed from the React parent component change, the `componentDidUpdate` lifecycle method encapsulating the React component is triggered, thus achieving automatic data updates.
[0042] It is understood that the embodiments of this application realize the one-way automatic data flow from React to Vue through the Props synchronization mechanism, without the need for developers to manually intervene in the data synchronization process, which simplifies the development process and avoids the data inconsistency problems that may be caused by manual synchronization.
[0043] In step S105, the event callback properties passed by the React component are mapped to the event listeners of the Vue component, thus completing the cross-framework transmission of events.
[0044] In this embodiment of the application, the mapping of event callback attributes includes: Identify property names that begin with "on" in React component Props; Convert the identified property names into event names that Vue components can trigger; Create a bridge function to call the callback function passed down from the React parent component when an event is triggered in a Vue component.
[0045] Specifically, event callback properties refer to function-type properties starting with "on" that are passed by the React parent component in the form of Props, used to respond to interactive events triggered by Vue components; event listeners refer to functions that conform to the Vue component event binding specification and can be recognized and triggered by Vue components.
[0046] In the `createVueListeners` function, all Props are iterated through, identifying property names in React component Props that begin with "on". Regular expression substitution is used to transform these property names, following a fixed rule: the leading "on" prefix is removed, and the remaining camelCase name is converted to hyphen-separated lowercase (e.g., "onCustomEvent" becomes "custom-event"), ensuring consistency with Vue component event naming conventions. The bridge function receives all parameters passed when the Vue component triggers an event and passes them intact to the React callback function, ensuring complete parameter passing.
[0047] It is understood that the embodiments of this application achieve automated mapping of event callbacks through standardized attribute name conversion and bridging function creation, which not only conforms to the programming habits of React and Vue, but also ensures the accurate transmission of event parameters and improves the stability of cross-framework event interaction.
[0048] In step S106, the Vue instance is destroyed when the React component is unloaded.
[0049] In this embodiment, the Vue instance is explicitly destroyed in the componentWillUnmount lifecycle method, releasing all resources it manages and unbinding all listeners.
[0050] In this context, React component unloading refers to the process of removing a React component from the React component tree due to reasons such as conditional rendering failure or route switching. Resources managed by a Vue instance include mounted DOM nodes, reactive data objects, watchers, event bindings, etc. Explicit destruction operations will trigger the Vue instance's beforeDestroy and destroyed lifecycle hooks, automatically executing internal cleanup logic.
[0051] Specifically, in the `componentWillUnmount` lifecycle method, it first checks if the Vue instance exists. If it does, it calls `this.vueInstance.$destroy()` to explicitly destroy the instance and sets `this.vueInstance` to `null` to completely release the reference. After calling `this.vueInstance.$destroy()`, the Vue instance unbinds all event listeners, clears all `watch` listeners, destroys all child component instances, and releases its association with DOM nodes, ensuring that no residual references prevent memory from being reclaimed.
[0052] It is understood that the embodiments of this application ensure that the lifecycle of the Vue instance is completely synchronized with the encapsulated React component through the lifecycle-aligned destruction mechanism, thereby avoiding isolated instances occupying resources and improving the memory usage efficiency and stability of the application.
[0053] In this embodiment of the application, the React parent component is allowed to obtain the internal Vue component instance through the ref mechanism.
[0054] Specifically, in the constructor of the React component, a vueComponentRef reference container is created using React.createRef(); in the render function of VueParentContainer, the reference container is bound to the target Vue component via the ref property. At the same time, the getVueInstance method is provided in the React component to return vueComponentRef.current to expose the Vue component instance. The React parent component can obtain the internal Vue instance by binding the ref to the encapsulated component and calling this method.
[0055] It is understood that the embodiments of this application break the instance access restrictions of cross-framework components through the instance reference forwarding mechanism, enabling the React parent component to deeply interact with the Vue component, meeting the component communication needs in complex business scenarios, and improving the flexibility and functionality of cross-framework integration.
[0056] Next, referring to the accompanying drawings, a Vue component bridging device based on React higher-order components is described according to an embodiment of this application.
[0057] Figure 3 This is a schematic diagram of the structure of a Vue component bridging device based on React higher-order components according to an embodiment of this application.
[0058] like Figure 3As shown, the Vue component bridging device 10 based on React higher-order components includes: a component encapsulation module 100 and a rendering and bridging module 200.
[0059] The component encapsulation module 100 provides higher-order functions that receive raw Vue components and encapsulate them into standard encapsulated React components that can be directly used in the React environment, enabling React developers to call Vue components declaratively using JSX syntax. The rendering and bridging module 200 integrates the DOM container management submodule, Vue instantiation and Props reactive synchronization submodule, event handling bridging submodule, lifecycle synchronization and resource cleanup submodule, and instance reference forwarding submodule into the standard encapsulated React component. The DOM container management submodule provides a real DOM element as the mounting point for the Vue component; the Vue instantiation and Props reactive... The Synchronization submodule creates and configures a Vue instance within the React component, mounts it to the mount point, and transforms the React component's ReactProps into Vue's reactive data. The Event Handling Bridge submodule injects reactive data into the Vue component and establishes a Props synchronization mechanism to achieve automatic data updates. The Lifecycle Synchronization and Resource Cleanup submodule maps event callback properties passed from the React component to event listeners in the Vue component, completing cross-framework event propagation and destroying the Vue instance when the React component is unloaded. The Instance Reference Forwarding submodule allows the React parent component to obtain the internal Vue component instance via the ref mechanism.
[0060] It should be noted that the foregoing explanation of an embodiment of a Vue component bridging method based on React higher-order components also applies to an intelligent connected vehicle positioning system based on this embodiment, and will not be repeated here.
[0061] According to the embodiments of this application, a positioning system based on intelligent connected vehicles is proposed. This system creates a dedicated React higher-order component that acts as an adapter, achieving automatic and efficient data synchronization through a deep reactive synchronization mechanism using Props. An automated encapsulation mechanism for event listeners allows the React parent component to handle events emitted by Vue child components as if they were native React events. Synchronizing the lifecycle of the React component and its internal Vue instance ensures that Vue components are created, updated, and destroyed at the correct times, effectively preventing memory leaks. An instance reference forwarding mechanism allows the React parent component to directly call methods of Vue child components or access their state, achieving deep component interaction. This allows React developers to use Vue components declaratively via JSX syntax, directly passing Props and event callbacks, just like using a regular React component, without needing to worry about the differences in the underlying framework and complex conversion logic. Therefore, this solves the problems of complex Props passing, inconvenient event listening, and asynchronous lifecycle management in existing technologies.
[0062] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described Vue component bridging method based on React higher-order components.
[0063] This application also provides a computer program product that stores a computer program that, when executed by a processor, implements the above-described Vue component bridging method based on React higher-order components.
[0064] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.
[0065] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise explicitly specified.
[0066] Any process or method described in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more N executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.
[0067] It should be understood that the various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, the N steps or methods can be implemented using software or firmware stored in memory and executed by a suitable instruction execution system. For example, if implemented in hardware as in another embodiment, it can be implemented using any one or a combination of the following techniques known in the art: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.
[0068] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.
Claims
1. A method for bridging Vue components based on React higher-order components, characterized in that, Includes the following steps: By encapsulating the original Vue component with higher-order functions, a standard encapsulated React component is obtained; Provide a real DOM element as the mount point for the Vue component; Create and configure a Vue instance in the encapsulated React component, mount it to the mount point, and convert the ReactProps of the React component into reactive data of Vue; Inject the reactive data into the Vue component and establish a Props synchronization mechanism to achieve automatic data updates; Map the event callback properties passed from React components to event listeners of Vue components to complete the cross-framework event passing; Destroy the Vue instance when the React component is unloaded.
2. The Vue component bridging method based on React higher-order components according to claim 1, characterized in that, The higher-order function returns a React component, which includes the componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods used to manage the creation, updating, and destruction of Vue instances.
3. The Vue component bridging method based on React higher-order components according to claim 2, characterized in that, In the componentDidMount lifecycle method, a Vue instance is created and configured, the current ReactProps are transformed into Vue's reactive data Props, and the watch mechanism is used to listen for changes in the current ReactProps to trigger the re-rendering of the Vue component.
4. The Vue component bridging method based on React higher-order components according to claim 2, characterized in that, In the componentDidUpdate lifecycle method, new reactive data Props are synchronized to the reactive data of the Vue instance, thereby automatically triggering the re-rendering of the internal Vue component.
5. A method for bridging Vue components based on React higher-order components according to claim 2, characterized in that, In the componentWillUnmount lifecycle method, the Vue instance is explicitly destroyed, releasing all resources it manages and unbinding all listeners.
6. The Vue component bridging method based on React higher-order components according to claim 1, characterized in that, It also includes allowing React parent components to access internal Vue component instances via the ref mechanism.
7. The Vue component bridging method based on React higher-order components according to claim 1, characterized in that, The mapping of the event callback properties includes: Identify property names that begin with "on" in React component Props; Convert the identified property names into event names that Vue components can trigger; Create a bridge function to call the callback function passed down from the React parent component when an event is triggered in a Vue component.
8. A Vue component bridging device based on React higher-order components, characterized in that, include: The module includes component encapsulation and rendering / bridging modules. The component encapsulation module is used to provide higher-order functions that receive raw Vue components and encapsulate them into standard encapsulated React components that can be used directly in the React environment, enabling React developers to call Vue components declaratively using JSX syntax. The rendering and bridging module integrates a DOM container management submodule, a Vue instantiation and Props reactive synchronization submodule, an event handling bridging submodule, a lifecycle synchronization and resource cleanup submodule, and an instance reference forwarding submodule into the standard encapsulated React component. The DOM container management submodule provides a real DOM element as the mount point for the Vue component. The Vue instantiation and Props reactive synchronization submodule creates and configures a Vue instance within the encapsulated React component, mounts it to the mount point, and converts the React component's ReactProps into reactive data for Vue. The event handling bridging submodule injects the reactive data into the Vue component and establishes a Props synchronization mechanism for automatic data updates. The lifecycle synchronization and resource cleanup submodule maps event callback properties passed from the React component to event listeners for the Vue component, enabling cross-framework event propagation and destroying the Vue instance when the React component is unloaded. The instance reference forwarding submodule allows the React parent component to access the internal Vue component instance via a ref mechanism.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, The program is executed by the processor to implement a Vue component bridging method based on React higher-order components as described in any one of claims 1-7.
10. A computer program product, comprising a computer program or instructions, characterized in that, When the computer program or instructions are executed, they implement the Vue component bridging method based on React higher-order components as described in any one of claims 1-7.