A method and device for embedding a Vue component in AntV x6

Abstract

The application relates to the field of computer graphics, and particularly relates to a method and device for embedding a Vue component in AntV x6. Mainly comprising: creating a unique root Vue instance for each topology graph; generating a DOM transplanted component for each Vue component, and creating a Vue rendering component associated with all the Vue components, mounting all the Vue components in the unique root Vue instance through the Vue rendering component; creating a Vue component management tool, using the Vue component management tool to manage a list of all the Vue components and a one-to-one binding relationship between each Vue component and a corresponding DOM transplanted component and a topology graph node; and using the Vue component management tool to manage the Vue rendering component to render the corresponding topology graph node according to the rendering data of the Vue component. The application can enable all the Vue components to share data through the root Vue instance, and changes of the Vue components are not required for changes of each topology graph node, thereby improving the rendering efficiency.

Description

Technical Field

[0001] This invention relates to the field of computer graphics, and in particular to a method and apparatus for embedding Vue components in AntV x6. Background Technology

[0002] When developing front-end applications, users can use the AntV x6 graphical framework and the Vue 2.0 open-source front-end framework to create topology diagrams of various logical relationships using drag-and-drop, editing, and deletion methods. These frameworks abstract and graphically represent resources, allowing users to easily and quickly manage various resources, promptly address issues arising during resource operation, and clearly view the relationships between different resources.

[0003] The original AntV x6 topology graph node instance only supports embedding SVG (Scalable Vector Graphics) format files, text, and native HTML (Hyper Text Markup Language) content. When the topology graph node's functional requirements are more complex, such as needing various tool menus and animation effects, generating the corresponding Document Object Model (DOM) structure using native HTML becomes very difficult. AntV x6 solves this difficulty by embedding a Vue instance. The idea behind this method is as follows: Figure 1 As shown.

[0004] One problem with this approach is that each node needs to be bound to one or more independent Vue instances. Since Vue instances are independent of each other, if data sharing between these instances is required, then... Figure 2 As shown, the data that needs to be shared is passed to the topology graph nodes, and then to the Vue instance. The layer-by-layer transmission of data makes the sharing of data between the topology graph and the outside world complicated and not easy to extend and maintain.

[0005] The second problem is that each Vue instance is referenced by a corresponding node in the topology graph, and each Vue instance consumes a certain amount of memory, which persists throughout the lifespan of the topology graph. When the number of nodes in the topology graph is too large, it leads to significant browser memory consumption. Furthermore, the creation of each Vue instance involves pre-processing data, including route processing, common data processing, internationalization processing, common component processing, and common mixin processing. Only after all this data processing is complete will Vue components be rendered sequentially. During the dynamic refresh of the topology graph, the frequent creation, updating, and destruction of Vue instances slows down the graph's rendering speed, negatively impacting the user experience.

[0006] Therefore, how to overcome the shortcomings of existing technologies and solve the problems caused by using multiple Vue instances in a single topology graph is a problem to be solved in this technical field. Summary of the Invention

[0007] In response to the above-mentioned defects or improvement needs of existing technologies, this invention solves the problems of data sharing difficulties and reduced rendering efficiency caused by using multiple Vue instances in a topology graph.

[0008] The embodiments of the present invention adopt the following technical solutions:

[0009] In a first aspect, this invention provides a method for embedding Vue components in AntV x6, specifically: creating a unique root Vue instance for each topology graph and passing all global data required by Vue components into the root Vue instance; creating a Vue rendering component, associating it with a list of all Vue components, binding the Vue component list as reactive data, and generating a DOM porting component for each Vue component; mounting all Vue components onto the unique root Vue instance through the Vue rendering component; creating a Vue component management tool to manage the list of all Vue components and the one-to-one binding relationship between each Vue component, its corresponding DOM porting component, and topology graph nodes; and using the Vue component management tool to manage the rendering of corresponding topology graph nodes based on the rendering data of the Vue components.

[0010] Preferably, passing all the global data needed by Vue components into the root Vue instance specifically includes: injecting all the global data needed by Vue components into the root Vue instance at once, so that Vue components can share data. The global data includes one or more of the following: global routing data, internationalization data, global public data, and global events.

[0011] Preferably, the step of creating a Vue rendering component and associating it with all Vue component lists further includes: generating a Vue component list of all Vue components; creating a Vue rendering component and associating it with all Vue component lists; binding the Vue component list as reactive data; storing the Vue component list in the Vue rendering component; traversing the Vue component list; sequentially creating a DOM porting component corresponding to each Vue component; and injecting the rendering data of the corresponding Vue component into each DOM porting component.

[0012] Preferably, the step of sequentially creating the DOM porting component corresponding to each Vue component specifically includes: when creating each DOM porting component, importing the corresponding Vue component according to the rendering parameters, wherein the rendering parameters include: the key of the Vue component, the name of the Vue component to be rendered, and the container ID of the topology graph node to be rendered.

[0013] Preferably, the step of using the Vue component management tool to manage all Vue component lists and the one-to-one binding relationship between each Vue component and its corresponding DOM porting component and topology graph node specifically includes: determining the association relationship between each topology graph node and each Vue component, forming a one-to-one correspondence between topology graph nodes and Vue components, connecting the corresponding topology graph nodes and Vue components through the DOM porting component, and performing state changes on the corresponding Vue components according to the rendering needs of the topology graph nodes.

[0014] Preferably, the step of changing the state of the corresponding Vue component according to the rendering needs of the topology graph node specifically includes: when the topology graph node is initialized, updated, or deleted, the Vue component management tool obtains the Vue component corresponding to the topology graph node according to the corresponding parameters, and completes the binding, updating, or unbinding of the corresponding Vue component.

[0015] Preferably, the step of changing the state of the corresponding Vue component according to the rendering needs of the topology graph node specifically includes: when binding is required, moving the DOM generated by the DOM porting component corresponding to the Vue component to the node container corresponding to the topology graph node; when unbinding, destroying the DOM porting component corresponding to the Vue component and deleting the corresponding DOM in the node container of the topology graph node.

[0016] Preferably, the step of changing the state of the corresponding Vue component according to the rendering needs of the topology graph node further includes: when the topology graph node is initialized, generating parameters of the correspondence between the topology graph node and the Vue component; when the rendering state of the topology graph node changes, passing the rendering state to the corresponding Vue component through the parameters. The parameters include one or more of the following: the Vue component KEY corresponding to the topology graph node, the name of the Vue component to be used by the topology graph node, and the container ID of the topology graph node.

[0017] Preferably, the step of using the Vue component management tool to manage the rendering of the Vue rendering component for the corresponding topology graph node specifically includes: updating the Vue component list in the Vue rendering component according to the Vue component state changes completed by the Vue component management tool, so as to trigger the rendering action of the Vue rendering component and complete the rendering of the topology graph node.

[0018] On the other hand, the present invention provides an apparatus for embedding Vue components in AntV x6, specifically comprising at least one processor and a memory, wherein the at least one processor and the memory are connected via a data bus, the memory stores instructions that can be executed by the at least one processor, and the instructions, after being executed by the processor, are used to complete the method of embedding Vue components in AntV x6 in the first aspect.

[0019] Compared with the prior art, the beneficial effects of the embodiments of the present invention are as follows: each topology graph integrates all the Vue instances that need to be used into a unique root Vue instance, mounts all the Vue components that need to be used under the root Vue instance, maps each Vue component to a topology graph node one by one through the DOM porting component, and manages the state changes and rendering of all Vue components in a unified manner through the Vue rendering component and the Vue component management tool, so that all Vue components can share data through the root Vue instance, and there is no need to change the Vue components for changes in each topology graph node, thus improving rendering efficiency. Attached Figure Description

[0020] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments of the present invention will be briefly described below. Obviously, the drawings described below are merely some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without any creative effort.

[0021] Figure 1 This is a diagram illustrating the method of embedding Vue components in the existing AntV x6.

[0022] Figure 2 This is a diagram illustrating another existing method for embedding Vue components in AntV x6;

[0023] Figure 3 This invention provides a method flow for embedding Vue components in AntV x6;

[0024] Figure 4 This is a schematic diagram illustrating the method of embedding Vue components in AntV x6 in this embodiment;

[0025] Figure 5 This is a schematic diagram illustrating another method for embedding Vue components in AntV x6 in this embodiment;

[0026] Figure 6 This is a schematic diagram illustrating another method for embedding Vue components in AntV x6 in this embodiment;

[0027] Figure 7This is a schematic diagram illustrating another method for embedding Vue components in AntV x6 in this embodiment;

[0028] Figure 8 This is a schematic diagram illustrating another method for embedding Vue components in AntV x6 in this embodiment;

[0029] Figure 9 This is a schematic diagram illustrating the complete lifecycle of the DOM porting component in this embodiment;

[0030] Figure 10 This is a schematic diagram of the rendering process in this embodiment;

[0031] Figure 11 This is a schematic diagram of a device structure for embedding Vue components in AntV x6, provided as an embodiment of the present invention.

[0032] The accompanying figure is labeled as follows:

[0033] 11: Processor; 12: Memory. Detailed Implementation

[0034] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention.

[0035] This invention is an architecture of a specific functional system. Therefore, the specific embodiments mainly describe the functional logic relationship of each structural module, and do not limit the specific software and hardware implementation methods.

[0036] Furthermore, the technical features involved in the various embodiments of the present invention described below can be combined with each other as long as they do not conflict with each other. The present invention will now be described in detail with reference to the accompanying drawings and embodiments.

[0037] Example 1:

[0038] To address the issues caused by using multiple Vue instances in a topology graph, this invention provides a method for directly embedding Vue components into AntV x6 topology graph nodes and mounting the Vue components to a single root Vue instance for rendering.

[0039] In practical implementation, to improve the modularity of the program, based on the hierarchical relationship between data and functions, the method provided in this embodiment can be abstracted into the following classes: a base class for topology graph components, a base class for Vue component management tools, a base class for Vue rendering components, a base class for DOM porting components, and Vue components that need to be embedded, etc. The specific definitions of each class and the data interaction methods between different classes are as follows. In actual implementation, other classes can also be abstracted or extended as needed, or the definitions of the classes can be adjusted.

[0040] like Figure 3 As shown in the embodiment of the present invention, the specific steps of the method for embedding Vue components in AntV x6 are as follows:

[0041] Step 101: Create a unique root Vue instance for each topology graph and pass the global data that all Vue components need to use into the root Vue instance.

[0042] When multiple Vue components are used in a single topology graph, due to the framework's characteristics, each Vue component cannot exist independently and must be contained within a Vue instance. Therefore, in Figure 1 In existing technologies, each Vue component uses a Vue instance as its carrier, and each Vue instance only hosts one Vue component, resulting in a significant waste of Vue instances. Furthermore, within the Vue framework, data sharing between different Vue instances is difficult, making the data processing flow during rendering more complex.

[0043] In the method provided in this embodiment, the following is removed: Figure 1 The Vue instance layer in the middle will Figure 1 Multiple independent Vue instances are merged into a single root Vue instance. All Vue components used in a topology are mounted to this root Vue instance, resulting in the following effect: Figure 4 As shown. Based on Vue's fundamental characteristics, there is a very robust mechanism for data sharing between multiple Vue components within the same Vue instance. Using a single root Vue instance to host all Vue components allows you to leverage this feature by passing global data needed by all Vue components into the root Vue instance. This enables direct data interaction between Vue components through the root Vue instance, eliminating the need for... Figure 2 Like existing technologies, data is transferred to each Vue component through topology graph nodes, and there is no need to pass global data to each Vue component separately.

[0044] In practice, the entire topology graph can be abstracted into an extended topology graph base class. This base class mainly extends the topology graph node base class and the topology graph line base class, determining the association between topology graph nodes and Vue components, as well as the timing of dynamic updates to topology graph nodes, including when to bind, update, and unbind Vue components. On the other hand, various topology graph nodes can be abstracted into a topology graph node base class, with each type of Vue component as a subclass of the Vue component base class. Examples include database type node components, file type node components, route type node components, dmss type node components, node tool menu components, etc., and each topology graph node needs to be rendered in the final page.

[0045] Step 102: Generate a DOM porting component for each Vue component and create a Vue rendering component that is associated with all Vue components. Use the Vue rendering component to mount all Vue components onto a single root Vue instance.

[0046] In this embodiment, multiple Vue components are mounted under a root Vue instance. Therefore, it is not possible to directly render the components through the Vue instance corresponding to each topology node as in existing technologies. Instead, a Vue rendering component is needed to render and manage all Vue components under the root Vue instance. The Vue components are not directly mounted in the root Vue instance, but are integrated through the Vue rendering component before being mounted in the root Vue instance.

[0047] In practice, the rendering action of Vue components can be abstracted into a Vue rendering component base class. This base class can be used to render all Vue components in the topology graph and can be used within the Vue root instance. When using it, the Vue rendering component mounts all Vue component instances needed by the topology graph to a root Vue instance, facilitating data sharing and communication between Vue component instances within the topology graph and with Vue component instances outside the topology graph. Simultaneously, the Vue component list data is bound as reactive data. When the Vue component list data is updated, the Vue rendering component will re-render and reflect the changes to the corresponding topology graph nodes, achieving dynamic UI updates for the topology graph.

[0048] Step 103: Create a Vue component management tool to manage the list of all Vue components and the one-to-one binding relationship between each Vue component and its corresponding DOM porting component and topology graph node.

[0049] In practice, each topology node may include a different DOM element, and the Vue component's DOM is added to the Vue instance's container by default. In existing technologies, each topology node corresponds to only one Vue instance, so DOM mounting between Vue components and the topology node container can be directly accomplished through the Vue instance. In the method provided in this embodiment, because a single root Vue instance hosts all Vue components, the relationship between topology nodes and Vue components becomes many-to-many, thus severing the DOM mounting between Vue components and the topology node container, forming a structure like... Figure 5 As shown, Vue components cannot be used to render the nodes of the topology graph.

[0050] To render the DOM generated by Vue components into the corresponding topology graph nodes, such as Figure 6 As shown, this embodiment also provides a DOM migration layer. Through the DOM migration component in the DOM migration layer, the DOM generated by each Vue component is dynamically migrated to the specified topology graph node container, thereby completing the DOM mounting between the Vue component and the corresponding topology graph node to solve the DOM rendering problem. In actual implementation, this function can be abstracted into a DOM migration component base class, which can move the DOM structure (i.e., the corresponding HTML) generated by the Vue component to the container corresponding to the specified topology graph node.

[0051] To associate DOM porting components, Vue components, and topology graph nodes, corresponding parameters need to be passed to the DOM porting component when it is created. Specifically: when creating each DOM porting component, the corresponding Vue component is imported according to the rendering parameters, which include: the Vue component's key, the name of the Vue component to be rendered, and the container ID of the topology graph node to be rendered.

[0052] Because the mapping between Vue components and topology graph nodes needs to change according to the rendering requirements of the topology graph nodes, it is also necessary to be able to easily update and delete the Vue components corresponding to the topology graph nodes. In this embodiment, the following additional features are also added: Figure 7 The Vue component management tool shown acts as the management layer for the relationships between topology graph nodes and Vue components, establishing a one-to-one correspondence between them. This facilitates dynamic processing such as adding, updating, and deleting topology graph nodes and Vue components. In practice, this functionality can be abstracted into a Vue component management tool base class. This base class manages all Vue component instances in the topology graph and provides methods for binding, unbinding, and updating Vue component instances, which are then used within the topology graph component base class.

[0053] Step 104: Based on the rendering data of the Vue component, use the Vue component management tool to manage the rendering of the Vue rendering component to render the corresponding topology graph nodes.

[0054] Through the aforementioned steps, the Vue component rendering component was used to mount the Vue component onto the root Vue instance, and the Vue component management tool was used to establish the correspondence between the Vue component and the topology graph nodes through DOM migration.

[0055] In practice, the same scheduling and management of the above base classes can be achieved using the topology graph component base class. This base class embeds all the relevant Vue component base classes in the topology graph node, connection, and utility instances, as well as the Vue rendering components related to the topology graph, providing complete topology graph functionality, and can be used in the root Vue instance. When creating the topology graph component, such as... Figure 8 As shown, a Vue rendering component, a Vue component management tool, and an extended topology graph will be created respectively. The Vue component management tool will be mounted on the extended topology graph, and the list of Vue components managed by the Vue component management tool will be injected into the Vue rendering component, thereby enabling the Vue management tool to manage the rendering.

[0056] After steps 101-104 provided in this embodiment, an architecture with only one root Vue instance and maintaining the correspondence between each Vue component and the topology graph node can be established. Once the architecture is established, the rendering actions of Vue rendering components can be managed through the Vue component management tool, and the rendering of topology graph nodes can be completed during topology graph editing.

[0057] Existing technologies use methods that embed multiple Vue instances, which prevent direct access to global routes, internationalization, global public data, and global events. If these data are needed, they must be passed as parameters through a hierarchical topology graph. This embodiment, by embedding multiple Vue components within a single root Vue instance, injects all necessary global data into the root Vue instance at once, enabling data sharing among components. This improves system usability and scalability. In practice, the global data that can be injected at once includes one or more of the following: global route data, internationalization data, global public data, and global events, as well as other required global data.

[0058] In the Vue framework, reactive data can trigger re-rendering actions upon updates. This embodiment stores a list of Vue components in reactive data format within the Vue rendering component, leveraging the characteristics of reactive data to trigger re-rendering and simplifying the control flow during Vue component updates and rendering. Specifically: when creating the Vue rendering component, a list of all Vue components is generated; the Vue rendering component is created, associated with all Vue component lists, and the Vue component lists are bound as reactive data. The Vue component list is then stored within the Vue rendering component. The Vue component list is iterated through, and a corresponding DOM porting component is created for each Vue component. The rendering data of the corresponding Vue component is then injected into each DOM porting component. Using a reactive data list of Vue components allows for the re-rendering of the topology graph nodes corresponding to the Vue components when the data in the Vue component list is updated, thus achieving dynamic UI updates of the topology graph.

[0059] In this embodiment, a Vue component management tool is used to manage the list of all Vue components and the one-to-one binding relationship between each Vue component, its corresponding DOM porting component, and topology graph nodes. Specifically, the association between each topology graph node and each Vue component is determined, forming a one-to-one correspondence between topology graph nodes and Vue components, and various state data in the Vue component list are dynamically updated according to the rendering needs of the topology graph nodes.

[0060] After binding, topology graph nodes can be bound to, updated, and unbound from specified Vue component relationship data using the Vue component management tool. In practice, each Vue component can be assigned a unique Vue component key, which is used to specify the topology graph node. When a topology graph node is initialized, updated, or deleted, the Vue component management tool retrieves the corresponding Vue component based on the relevant parameters and completes the binding, updating, or unbinding of that component. Because the Vue component list is reactive data, the binding, updating, and unbinding processes of topology graph nodes will update the entire Vue component list of the topology graph, triggering a re-rendering of the Vue rendering components.

[0061] In Vue 2.0 implementations, due to the rendering characteristics of parent-child components, when a child component is rendered, its generated DOM structure is sequentially rendered into the parent component's container (i.e., the container of the DOM porting component), rather than into the container of the topology graph nodes that need to be rendered. Therefore, when binding is required, the DOM generated by the DOM porting component corresponding to the Vue component is moved to the node container corresponding to the topology graph node; when unbinding, the DOM porting component corresponding to the Vue component is destroyed, and the corresponding DOM in the topology graph node's node container is deleted. In practice, the container of the topology graph node can be looked up based on the container ID parameter of the topology graph node corresponding to each Vue component passed in when the Vue rendering component is created.

[0062] In practice, the complete lifecycle of a DOM porting component is as follows: Figure 9 As shown.

[0063] Step 201: Create a DOM porting component based on the rendering parameters of the Vue component.

[0064] Step 202: In the mocked phase, obtain the $el of the current Vue component and migrate $el to the DOM container of the corresponding topology graph node.

[0065] Step 203: When the parameters change, re-execute `mouted`.

[0066] Step 204: Destruction phase. Locate the DOM container of the corresponding topology graph node and remove the DOM from the DOM container.

[0067] Through steps 201-204 provided in this embodiment, all state changes of the DOM migration component can be completed. In actual implementation, each step is executed according to the actual state changes.

[0068] In practical implementation, to complete the rendering of topology graph nodes, parameters for rendering need to be generated during the creation of topology graph nodes, and the values ​​of these parameters need to be adjusted when the binding relationship between the topology graph node and the Vue component changes. When a topology graph node is initialized, parameters corresponding to the topology graph node and the Vue component are generated. When the rendering state of the topology graph node changes, the rendering state is passed to the corresponding Vue component through these parameters. These parameters include one or more of the following: the Vue component KEY corresponding to the topology graph node, the name of the Vue component required by the topology graph node, and the container ID of the topology graph node. Other parameters that need to be passed between the topology graph and the Vue component may also be included. During creation, these parameters are passed to the topology graph node according to the binding relationship. The Vue component management tool can then be used to bind, update, and unbind the Vue component with the specified KEY when the node instance is initialized, updated, or deleted.

[0069] Once all the above preparations are completed, the list of Vue components in the Vue rendering component can be updated based on the Vue component state changes recorded by the Vue component management tool, thereby triggering the rendering action of the Vue rendering component and completing the rendering of the topology graph nodes.

[0070] like Figure 10 As shown, the rendering process after the topology graph state changes is as follows.

[0071] Step 301: Create, update, or delete nodes in the topology graph.

[0072] Step 302: Update the Vue list data using the Vue component management tool.

[0073] Step 303: The Vue rendering component responds to updates to the Vue list data.

[0074] Step 304: Update the rendering state of the DOM transplant component.

[0075] By following steps 201-204 provided in this embodiment, the rendering state can be dynamically updated based on changes in the topology graph nodes.

[0076] The method for embedding Vue components in AntV x6 provided in this embodiment has the following advantages compared to the method of embedding multiple Vue instances in the prior art.

[0077] 1. Using multiple embedded Vue instances does not allow direct access to global routes, internationalization, global public data, global events, etc. If these data are needed, they must be passed as parameters through the topology nodes layer by layer. However, this embodiment uses embedded Vue components, requiring only a single injection of the above global data. This allows Vue components to easily share data, improving system usability and scalability.

[0078] 2. Using multiple embedded Vue instances involves a pre-processing phase for each Vue instance, including route processing, common data processing, internationalization processing, common component processing, and common mixin processing. Only after this data processing is complete will the Vue components be rendered sequentially, which takes time. In contrast, this embodiment embeds all Vue components into a single Vue instance, eliminating the aforementioned pre-processing phase. This improves the rendering speed of the topology graph nodes and reduces memory usage.

[0079] 3. Using multiple embedded Vue instances results in limited functionality and poor scalability, making it suitable only for simple topology diagrams. In contrast, using embedded Vue components offers more complex logic but greater flexibility and scalability, making it suitable for larger, more complex, and editable topology diagrams.

[0080] Example 2:

[0081] Based on the method for embedding Vue components in AntV x6 provided in Embodiment 1 above, the present invention also provides an apparatus for embedding Vue components in AntV x6 that can be used to implement the above method, such as... Figure 11 The diagram shown is a schematic of the device architecture according to an embodiment of the present invention. The device for embedding Vue components in AntV x6 in this embodiment includes one or more processors 11 and a memory 12. The diagram of embedding Vue components in AntV x6 uses one processor 11 as an example.

[0082] Processor 11 and memory 12 can be connected via a bus or other means. Figure 11 Taking the example of a connection between China and Israel via a bus.

[0083] The memory 12 serves as a non-volatile computer-readable storage medium for the method of embedding Vue components in AntV x6. It can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the method of embedding Vue components in AntV x6 in Embodiment 1. The processor 11 executes various functional applications and data processing of the device for embedding Vue components in AntV x6 by running the non-volatile software programs, instructions, and modules stored in the memory 12, thereby implementing the method of embedding Vue components in AntV x6 in Embodiment 1.

[0084] Memory 12 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some embodiments, memory 12 may optionally include memory remotely located relative to processor 11, which can be connected to processor 11 via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0085] The program instructions / modules are stored in memory 12. When executed by one or more processors 11, they perform the methods for embedding Vue components in AntV x6 as described in Embodiment 1 above, such as executing the methods described above. Figure 3 , Figure 9 and Figure 10 The steps shown.

[0086] Those skilled in the art will understand that all or part of the steps in the various methods of the embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, which may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0087] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for embedding Vue components in AntV x6, characterized in that, Specifically, it includes: Create a unique root Vue instance for each topology graph and pass the global data that all Vue components need to use to the root Vue instance; Generate a DOM porting component for each Vue component, and create a Vue rendering component that associates all Vue components. Then, mount all Vue components in a single root Vue instance through the Vue rendering component. The creation of the Vue rendering component associated with all Vue components also includes: generating a Vue component list of all Vue components, creating a Vue rendering component, associating it with the list of all Vue components, binding the Vue component list as reactive data, and storing the Vue component list in the Vue rendering component; iterating through the Vue component list, creating a DOM porting component corresponding to each Vue component in turn, and injecting the rendering data of the corresponding Vue component into each DOM porting component. Create a Vue component management tool to manage the list of all Vue components and the one-to-one binding relationship between each Vue component and its corresponding DOM porting component and topology graph node; Based on the rendering data of Vue components, use the Vue component management tool to manage the rendering of Vue rendering components to render the corresponding topology graph nodes; The entire topology graph is abstracted into an extended topology graph base class, which extends the topology graph node base class and determines the association between topology graph nodes and Vue components, as well as the timing of dynamic updates of topology graph nodes, including when to bind, update, and unbind Vue components. Various topology graph nodes are abstracted into topology graph node base classes, and each Vue component is treated as a subclass of the Vue component base class.

2. The method for embedding Vue components in AntV x6 according to claim 1, characterized in that, The global data that all Vue components need to use, which is passed to the root Vue instance, specifically includes: Inject all the global data needed by Vue components into the root Vue instance at once so that Vue components can share data. The global data includes one or more of the following: global route data, internationalization data, global public data, and global events.

3. The method for embedding Vue components in AntV x6 according to claim 1, characterized in that, The process of sequentially creating the DOM porting component corresponding to each Vue component specifically includes: When creating each DOM porting component, the corresponding Vue component is imported according to the rendering parameters, which include: the Vue component's key, the name of the Vue component to be rendered, and the container ID of the topology node to be rendered.

4. The method for embedding Vue components in AntV x6 according to claim 1, characterized in that, The process of using a Vue component management tool to manage the list of all Vue components and the one-to-one binding relationship between each Vue component, its corresponding DOM porting component, and topology nodes specifically includes: Determine the association between each topology graph node and each Vue component, forming a one-to-one correspondence between topology graph nodes and Vue components. Connect the corresponding topology graph nodes and Vue components through DOM porting components, and perform state changes on the corresponding Vue components according to the rendering needs of the topology graph nodes.

5. The method for embedding Vue components in AntV x6 according to claim 4, characterized in that, The process of changing the state of corresponding Vue components according to the rendering requirements of the topology graph nodes specifically includes: When a topology graph node is initialized, updated, or deleted, the Vue component management tool retrieves the corresponding Vue component based on the relevant parameters and completes the binding, updating, or unbinding of the corresponding Vue component.

6. The method for embedding Vue components in AntV x6 according to claim 4, characterized in that, The process of changing the state of corresponding Vue components according to the rendering requirements of the topology graph nodes specifically includes: When binding is required, the DOM generated by the DOM porting component corresponding to the Vue component is moved to the node container corresponding to the topology graph node; When unbinding, the DOM porting component corresponding to the Vue component is destroyed, and the corresponding DOM in the node container of the topology graph node is deleted.

7. The method for embedding Vue components in AntV x6 according to claim 4, characterized in that, The process of changing the state of corresponding Vue components according to the rendering needs of the topology graph nodes also includes: When a topology graph node is initialized, parameters are generated to establish the correspondence between the topology graph node and Vue components. When the rendering state of a topology graph node changes, the rendering state is passed to the corresponding Vue component through these parameters. These parameters include one or more of the following: the Vue component KEY corresponding to the topology graph node, the name of the Vue component that the topology graph node needs to use, and the container ID of the topology graph node.

8. The method for embedding Vue components in AntV x6 according to claim 1, characterized in that, The step of using the Vue component management tool to manage the rendering of Vue rendering components for the corresponding topology graph nodes specifically includes: Based on the Vue component state changes recorded by the Vue component management tool, the list of Vue components in the Vue rendering component is updated to trigger the rendering action of the Vue rendering component and complete the rendering of the topology graph nodes.

9. A device for embedding Vue components in AntV x6, characterized in that: It includes at least one processor and a memory, which are connected via a data bus. The memory stores instructions that can be executed by the at least one processor. After being executed by the processor, the instructions are used to perform the method of embedding Vue components in AntV x6 as described in any one of claims 1-8.

Images