Search

CN-121996221-A - Vue component bridging method based on compact higher-order component

CN121996221ACN 121996221 ACN121996221 ACN 121996221ACN-121996221-A

Abstract

The application relates to the technical field of front-end Web development, in particular to a method for bridging a Vue component based on a reaction high-order component, which comprises the steps of packaging the Vue component through a high-order function to obtain a packaged reaction component, providing DOM elements as mounting points of the Vue component, creating and configuring a Vue instance in the packaged reaction component, mounting the instance in the mounting points, converting ReactProps of the reaction component into responsive data of the Vue, injecting the responsive data into the Vue component, establishing a Props synchronization mechanism, mapping event callback attribute transmitted by the reaction component into an event monitor of the Vue component, completing cross-frame transmission of events, and destroying the Vue instance when the reaction component is unloaded. Therefore, the problems of complex transmission, inconvenient event monitoring, asynchronous life cycle management and the like of Props in the prior art are solved.

Inventors

  • ZHANG XIXI

Assignees

  • 北京白龙马云行科技有限公司

Dates

Publication Date
20260508
Application Date
20260128

Claims (10)

  1. 1. A method for bridge connection of a Vue component based on a reaction higher order component, comprising the steps of: packaging the original Vue component through a high-order function to obtain a standard packaged reaction component; Providing a real DOM element as a mounting point of the Vue component; Creating and configuring a Vue instance in the packaged reaction component, mounting the Vue instance in the mounting point, and converting ReactProps of the reaction component into responsive data of the Vue; injecting the responsive data into a Vue component, and establishing Props a synchronous mechanism to realize automatic data updating; Mapping the event callback attribute transferred by the reaction component into an event monitor of the Vue component, and completing cross-frame transfer of the event; The Vue instance is destroyed when the act component is uninstalled.
  2. 2. The method of claim 1, wherein the return of the high-order function to the exact component includes componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods for managing creation, updating, and destruction of the exact instance.
  3. 3. The method of claim 2, wherein in the componentDidMount lifecycle method, a Vue instance is created and configured, current ReactProps is converted into Vue responsive data Props, and current ReactProps changes are monitored by a watch mechanism to trigger re-rendering of the Vue.
  4. 4. The method of claim 2, wherein in the componentDidUpdate lifecycle method, new responsive data Props is synchronized into the responsive data of the Vue instance, thereby automatically triggering re-rendering of internal Vue components.
  5. 5. The method for bridging a Vue component based on a act higher-order component according to claim 2, wherein in the componentWillUnmount lifecycle method, a Vue instance is explicitly destroyed, all resources managed by the Vue instance are released, and all listeners are unbinding.
  6. 6. The method for bridge connection between the Vue components based on the act higher-order components of claim 1, further comprising allowing the act parent component to obtain an internal Vue component instance through a ref mechanism.
  7. 7. The method for bridging a Vue component based on a act higher-order component according to claim 1, wherein the mapping of the event callback attribute comprises: identifying attribute names beginning with on in the act component Props; Converting the identified attribute name into an event name format which can be triggered by the Vue component; and creating a bridge function, and calling a callback function transferred by the act parent component when the Vue component triggers an event.
  8. 8. A vacuum component bridging device based on a reaction higher-order component is characterized by comprising a component packaging module and a rendering and bridging module, wherein, The component packaging module is used for providing a high-order function, receiving an original Vue component, converting the original Vue component into a standard packaging real component which can be directly used in a real environment through packaging, and enabling a real developer to call the Vue component through JSX grammar in a declarative mode; The rendering and bridging module is used for integrating a DOM container management sub-module, a Vue instantiation and Props response type synchronization sub-module, an event processing bridging sub-module, a life cycle synchronization and resource cleaning sub-module and an instance reference forwarding sub-module in the standard packaging real component, wherein the DOM container management sub-module provides a real DOM element as a mounting point of the Vue component, the Vue instantiation and Props response type synchronization sub-module is used for creating and configuring a Vue instance in the packaging real component, mounting the Vue instance in the mounting point, converting ReactProps of the real component into response type data of the Vue, the event processing bridging sub-module is used for injecting the response type data into the Vue component, and establishing Props synchronization mechanism to achieve automatic data updating, the life cycle synchronization and resource cleaning sub-module is used for mapping event callback attributes transferred by the real component into event listeners of the Vue component, completing cross-frame transfer of events, and obtaining response type data of the real component by the real instance sub-component through the parent instance reference forwarding sub-module when the real instance is destroyed, and the real instance is allowed to acquire the real instance by the real instance.
  9. 9. A computer readable storage medium having stored thereon a computer program, the program being executable by a processor for implementing a real higher order component based Vue component bridging method according to any one of claims 1-7.
  10. 10. A computer program product comprising a computer program or instructions which, when executed, implements a real higher order component-based Vue component bridging method as claimed in any one of claims 1 to 7.

Description

Vue component bridging method based on compact higher-order component Technical Field The application relates to the technical field of front-end Web development, in particular to a Vue component bridging method based on a reaction higher-order component. Background With the rapid development of front-end technology and the improvement of enterprise-level application complexity, multiple front-end framework concurrent scenes often appear in modern Web development. The practice and the Vue are taken as two main front end frames of the current mainstream, and each front end frame has perfect ecology and wide user groups. In large projects or progressive migration processes, it is often necessary to introduce mature components developed based on Vue in the reaction-dominated technology stack. However, there are essential differences between Vue and exact in component model, data response mechanism, event system and lifecycle management, and direct mixed use can lead to compatibility problems. Currently, the cross-frame integration schemes commonly found in the industry mainly include an iframe embedding scheme and a Web Components packaging scheme. The iframe embedding scheme independently constructs the Vue component into a complete HTML page, and embeds the complete HTML page into the reaction application through the iframe tag, so that the visual integration is realized, but the obvious problems of complex communication, high performance cost, difficult pattern isolation, split user experience and the like exist. The Web Components packaging scheme is the implementation mode closest to the prior art at present, and the rendering of the Vue component in the real environment is realized to a certain extent, but the problems of Props that the transmission is complex, the type support is weak, the event monitoring mechanism is not intuitive, the function is limited, the lifecycle management is asynchronous, and the patterns are isolated and conflict exist. Disclosure of Invention The application provides a method for bridging a Vue component based on a compact high-order component, which aims to solve the problems of Props in the prior art that transmission is complex, event monitoring is inconvenient, lifecycle management is asynchronous and the like. The embodiment of the first aspect of the application provides a method for bridging a Vue component based on a compact high-order component, which comprises the following steps of packaging an original Vue component through a high-order function to obtain a standard packaged compact component, providing a real DOM element as a mounting point of the Vue component, creating and configuring a Vue instance in the packaged compact component, mounting the instance in the mounting point, converting ReactProps of the compact component into responsive data of the Vue, injecting the responsive data into the Vue component, establishing a Props synchronization mechanism to realize automatic data updating, mapping a callback attribute transferred by the compact component into an event listener of the Vue component, completing cross-frame transfer of an event, and destroying the Vue instance when the compact component is unloaded. Optionally, the return of the higher order function includes a return component that includes componentDidMount, componentDidUpdate and componentWillUnmount lifecycle methods for managing creation, updating, and destruction of the Vue instance. Optionally, in the componentDidMount lifecycle method, a Vue instance is created and configured, current ReactProps is converted to responsive data Props for Vue, and current ReactProps changes are listened to through a watch mechanism to trigger re-rendering of the Vue component. Optionally, in the componentDidUpdate lifecycle method, the new responsive data Props is synchronized into the responsive data of the Vue instance, thereby automatically triggering re-rendering of the internal Vue components. Optionally, in the componentWillUnmount lifecycle method, the Vue instance is explicitly destroyed, all the resources it manages are released, and all the listeners are unbinding. Optionally, allowing the exact parent component to obtain the internal Vue component instance through the ref mechanism is also included. Optionally, the mapping of event callback attributes comprises identifying attribute names beginning with on in a reaction component Props, converting the identified attribute names into an event name format which can be triggered by a Vue component, creating a bridge function, and calling a callback function transferred by a reaction parent component when the Vue component triggers an event. The embodiment of the second aspect of the application provides a device for bridging a Vue component based on a high-order component of a real-time application, which comprises a component encapsulation module, a rendering and bridging module, wherein the component encapsulation module is used for providing a