Method, system, device, and medium for dynamically creating vue component by means of text

Abstract

Disclosed are a method, a system, a device and a medium, for dynamically creating a vue component by means of text. The method comprises: creating an empty vue component as a parent component, the parent component having a div element as a mounting container for a dynamic component; adding two props to a parent component, used for receiving local text or acquiring remote text; splitting text content into three parts, template, script, and css, and performing corresponding processing; converting the script into a constructor function of a vue component by means of a vue extend method, and creating a vue instance by means of the constructor function; bridging properties and events of a parent component to the vue instance, and mounting the vue instance to the div element; and mounting the css to the div element, to complete creation of the vue component. The present invention can dynamically generate and modify a vue component on the basis of the structure and logic of the vue component described in a text file, without repackaging an application, thereby improving development efficiency and user experience.

Description

Method, system, device and medium for dynamically creating vue component through text TECHNICAL FIELD

[0001] The present application belongs to the technical field of vue application development, and particularly relates to a method, system, device and medium for dynamically creating vue component through text. BACKGROUND

[0002] In modern web development, vue is a popular front-end framework that allows developers to build complex user interfaces through componentization. However, traditional vue components need to be defined during the development stage and are difficult to modify or replace after the application is published. Not only does this limit the flexibility and maintainability of vue components, but as the amount of project code increases, this packaging process can consume a lot of time and resources. Every time a vue component needs to be modified, it needs to be packaged multiple times, resulting in wasted time and resources. SUMMARY

[0003] The present application aims to provide a method, system, device and medium for dynamically creating vue component through text, to overcome the problem of wasting time and resources caused by the need to package multiple times every time a vue component needs to be modified in the prior art.

[0004] To achieve the above-mentioned purpose, the present application adopts the following technical solutions:

[0005] A method for dynamically creating a vue component through text, comprising the following steps:

[0006] Creating an empty vue component as a parent component and creating a div element in the parent component;

[0007] Adding two attributes in the parent component for receiving local text and obtaining remote text respectively to obtain text;

[0008] Splitting the obtained text into template, script, and css, wherein template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component;

[0009] Adding a prefix to the class in css, wherein the prefix consists of a unique string;

[0010] Converting script into a javascript object, adding a template attribute in the javascript object, and passing the content of template to the added template attribute in the javascript object;

[0011] Convert a JavaScript object into a constructor function for a Vue component;

[0012] Create a child component using the Vue component's constructor and pass all properties from the parent component to the child component;

[0013] Iterate through all functions within the `method` property of a JavaScript object and redirect all functions to child components;

[0014] Bridges events between parent and child components;

[0015] The child component is mounted to the parent component's div element using the $mount method in the child component;

[0016] Attach the CSS to the parent component's div element to complete the creation of the Vue component.

[0017] Furthermore, the addition of two properties to the parent component for receiving local text and retrieving remote text, respectively, is as follows:

[0018] Add two properties to the parent component: code and codeUrl. code is the local text content, and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is retrieved from the remote server first. If retrieving the text from the remote server fails, the text content in code is used. When codeUrl is invalid, the text content in code is used directly.

[0019] Furthermore, the obtained text is split into three parts: template, script, and CSS, specifically as follows:

[0020] The obtained text is parsed into three text blocks using regular expressions: template, script, and css.

[0021] Furthermore, the unique string is created using a GUID.

[0022] Furthermore, the conversion of the JavaScript object into the constructor function of the Vue component specifically involves using the extend method provided by the Vue component to convert the JavaScript object into the constructor function of the Vue component.

[0023] Furthermore, the step of hijacking all functions into child components specifically involves using the bind method to hijack all functions into child components.

[0024] Furthermore, the event that bridges the parent and child components specifically includes:

[0025] Traverse the private attribute_events in the parent component, which stores all the event names in the parent component, create events in the child component using the same name, and then listen to the events in the child component in the parent component. When the child component triggers the event, the parent component triggers the event of the parent component using the same parameters.

[0026] A system for dynamically creating a vue component through text, comprising:

[0027] A parent component creation module is used to create an empty vue component as a parent component and create a div element in the parent component.

[0028] An attribute increasing module is used to add two attributes in the parent component, one for receiving local text and the other for obtaining remote text.

[0029] A splitting module is used to split the obtained text into template, script, and css, where template is the UI interface of the vue component, script is the specific internal logic of the vue component, and css is the UI interface style of the vue component.

[0030] A prefix module is used to add a prefix to the class in the css, which consists of a unique string.

[0031] A first conversion module is used to convert script into a javascript object, add a template attribute to the javascript object, and pass the content of template to the added template attribute in the javascript object.

[0032] A second conversion module is used to convert the javascript object into a constructor function of the vue component.

[0033] A creation module is used to create a child component through the constructor function of the vue component and pass all the attributes in the parent component to the child component.

[0034] A traversal module is used to traverse all the functions in the method attribute of the javascript object and hijack all the functions to the child component.

[0035] A bridging module is used to bridge the events of the parent component and the child component.

[0036] A first mounting module is used to mount the child component to the div element of the parent component through the $mount method in the child component.

[0037] A second mounting module is used to mount the css to the div element of the parent component, completing the creation of the vue component.

[0038] A computer device comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the method for dynamically creating a vue component through text.

[0039] A computer readable storage medium stores a computer program, wherein the computer program is executable by a processor to implement the steps of the method for dynamically creating a vue component through text.

[0040] Compared with the prior art, the present application has the following beneficial technical effects:

[0041] Through the method of the present application, the developer can update or replace the vue component in the application in real time after the application is released, and only needs to modify or upload the corresponding text file. In this way, not only can the vue component be dynamically and personalized to meet different needs and scenarios, but also the time and resource consumption for repackaging can be reduced, and the efficiency of packaging and deployment can be improved. Most importantly, on the basis of the present application, a remote vue component store can be created to uniformly maintain and manage vue components, thereby improving the development efficiency and the maintainability of the project.

[0042] The present application can parse a text file stored in a local or remote server and dynamically generate a vue component according to the parsing result. The text file can be in any format as long as it can describe the structure and logic of the vue component. The vue component can be of any type, such as a button, a form, a chart, etc. Through the present application, the vue component in the application can be modified after the application is released, thereby avoiding the waste of time and resources caused by multiple packaging. BRIEF DESCRIPTION OF DRAWINGS

[0043] The accompanying drawings, which are included to provide a further understanding of the application and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the application. The detailed description of the application serves to explain the application and is not intended to limit the application in any way.

[0044] Fig. 1 is a flowchart of the method for dynamically creating a vue component through text according to an embodiment of the present application;

[0045] Fig. 2 is a structure of a vue component;

[0046] Fig. 3 is a vue component dynamically created through text;

[0047] Fig. 4 is a schematic diagram of the system structure for dynamically creating a vue component through text according to an embodiment of the present application;

[0048] Fig. 5 is a schematic diagram of the structure of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0049] In order to better understand the technical scheme of the present application, the technical scheme in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work should fall within the scope of the present application.

[0050] It should be noted that the terms "first", "second", and the like in the specification and claims of the present application and the above-described drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or a chronological sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product, or device that includes a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units that are not clearly listed or inherent to the process, method, product, or device.

[0051] Embodiment one

[0052] As shown in Fig. 1, the present application discloses a method for dynamically creating a vue component through text, comprising the following steps:

[0053] An empty vue component is created as a parent component, and a div element is created in the parent component;

[0054] Two attributes for receiving local text and obtaining remote text are added in the parent component to obtain the text;

[0055] The obtained text is split into three parts of template, script, and css, wherein the template is the UI interface of the vue component, the script is the specific internal logic of the vue component, and the css is the UI interface style of the vue component;

[0056] A prefix is added to the class in the css, and the prefix consists of a unique string;

[0057] convert the script into a javascript object, add a template attribute in the javascript object, and pass the content of the template to the added template attribute in the javascript object;

[0058] convert the javascript object into a constructor function of a vue component;

[0059] create a child component through the constructor function of the vue component, and pass all the attributes in the parent component to the child component;

[0060] traverse all the functions in the method attribute in the javascript object, and hijack all the functions to the child component;

[0061] bridge the events of the parent component and the child component;

[0062] mount the child component to the div element of the parent component through the $mount method in the child component;

[0063] mount the css to the div element of the parent component, and complete the creation of the vue component.

[0064] Embodiment two

[0065] The present application creates a vue component dynamically by parsing the template, script and css in the text file, creating the template and script into a constructor function of a vue component through the extend method of the vue component, creating a child component through the constructor function of the vue component, and finally mounting the child component and the css to the div element of the parent component.

[0066] In summary, the method of the present application specifically comprises the following steps:

[0067] Step 1:

[0068] create an empty vue component, and create a div element in the empty vue component, the empty vue component as a parent component, not only a container of the dynamically created dynamic component through the text, but also provides an attribute and an event interface to the outside, which can pass the external attribute and event to the dynamic component.

[0069] Step 2:

[0070] Two attributes, code and codeUrl, are added to the parent component created in step 1, where code is the local text content and codeUrl is the address of the text on the remote server. When codeUrl is valid, the text is obtained from the remote server first, and when the text obtained from the remote server fails, the text content in code is used. When codeUrl is invalid, the text content in code is directly used.

[0071] Step 3:

[0072] The text obtained in step 2 is parsed into three text blocks, template, script, and css, through regular expressions, as shown in Figure 2. The function of each text block is shown in the following table:

[0073] Step 4:

[0074] A unique string is created using guid, for example:.v1-render-eeefeec7-a722-6bd3-27db-83bbbf8986c4, and then this string is added in front of each class in css, for example: there is a class named.text in the text, after modification it becomes:.v1-render-eeefeec7-a722-6bd3-27db-83bbbf8986c4.text. After processing, the style of the dynamic component can be isolated.

[0075] Step 5:

[0076] The script text block is converted into a javascript object using new Function(script)(), and a template attribute is added, then the content of the template text block is passed to this template attribute.

[0077] Step 6:

[0078] The javascript object is converted into a vue component constructor function through vue.extend(obj).

[0079] Step 7:

[0080] A child component is created through the vue component constructor function, at the same time, all attributes of the parent component are passed to the child component. At this time, this child component is only a basic vue component containing UI interface and attributes, and does not contain any internal logic.

[0081] Step 8:

[0082] Traverse the methods attribute defined in the javascript object, which contains all the internal processing logic in the subcomponent. In the subcomponent, create an empty function with the same name as the function in the methods of the javascript object, and copy the function in the methods to the empty function, and finally use the bind method to change the this pointer of these functions to the subcomponent.

[0083] Step 9:

[0084] Bridge the events of the parent component and the subcomponent. Traverse the private attribute_events in the parent component, which stores all the event names in the parent component, and create events in the subcomponent using the same name, and then listen to the events in the subcomponent in the parent component. When the subcomponent triggers the event, the parent component will trigger the event of the parent component using the same parameters. In this way, the events of the subcomponent can be exposed to the outside, for the calling party to use.

[0085] Step 10:

[0086] Mount the UI interface in the div element of the parent component through the $mount method in the subcomponent.

[0087] Step 11:

[0088] Mount the css to the div element of the parent component, complete the creation of the vue component, as shown in Figure 3.

[0089] Embodiment two

[0090] As shown in Figure 4, the present application provides a system for dynamically creating a vue component through text, comprising:

[0091] The parent component creation module is used to create an empty vue component as a parent component, and create a div element in the parent component;

[0092] The attribute increasing module is used to add two attributes in the parent component, which are used to receive local text and obtain remote text respectively, code and codeUrl, wherein code is the text content locally, codeUrl is the address of the text on the remote server, when codeUrl is valid, the text is obtained from the remote server first, when the text obtained from the remote server fails, the text content in code is used; when codeUrl is invalid, the text content in code is directly used;

[0093] Splitting module: used for parsing the obtained text into template, script and css parts through regular expression, wherein the template is the UI interface of the vue component, the script is the specific internal logic of the vue component, and the css is the UI interface style of the vue component;

[0094] Prefix module: used for adding a prefix to the class in the css, wherein the prefix consists of a unique string created by using a guid;

[0095] First conversion module: used for converting the script into a javascript object, adding a template attribute in the javascript object, and passing the content of the template to the template attribute added in the javascript object;

[0096] Second conversion module: used for converting the javascript object into the constructor of the vue component through an extend method provided by the vue component;

[0097] Creation module: used for creating a child component through the constructor of the vue component, and passing all the attributes in the parent component to the child component;

[0098] Traversal module: used for traversing all the functions in the method attribute in the javascript object, and hijacking all the functions to the child component through a bind method;

[0099] Bridge module: used for bridging the events of the parent component and the child component, specifically, traversing a private attribute_events in the parent component, storing all the event names in the parent component in the private attribute, creating events in the child component through the same names, then listening to the events in the child component in the parent component, and triggering the events of the parent component through the same parameters when the child component triggers the events;

[0100] First mounting module: used for mounting the child component into the div element of the parent component through a $mount method in the child component;

[0101] Second mounting module: used for mounting the css into the div element of the parent component, and completing the creation of the vue component.

[0102] Embodiment three

[0103] A computer device, as shown in FIG. 5, comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the method for dynamically creating a vue component through text.

[0104] Example Four

[0105] A computer readable storage medium stores a computer program, the computer program is executed by a processor to implement the steps of the method for dynamically creating a vue component through text.

[0106] Those skilled in the art will appreciate that embodiments of the present application can be provided as methods, systems, or computer program products. Accordingly, the present application can be embodied in the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present application can be embodied in the form of a computer program product on one or more computer readable storage media (including, but not limited to, disk memory, CD-ROMs, optical storage media, etc.) having computer usable program code embodied therein.

[0107] The present application is described in reference to the flowchart illustrations and / or block diagrams according to the embodiments of the present application. It should be understood that each flow and / or block in the flowchart illustrations and / or block diagrams, and combinations of flows and / or blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general purpose computer, a special purpose computer, an embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart illustrations and / or block diagrams one or more flows and / or blocks in the flowchart illustrations and / or block diagrams.

[0108] These computer program instructions can also be stored in a computer readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer readable memory produce an article of manufacture including instructions means which implement the function specified in the flowchart illustrations and / or block diagrams one or more flows and / or blocks in the flowchart illustrations and / or block diagrams.

[0109] These computer program instructions can also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions executed on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart illustrations and / or block diagrams one or more flows and / or blocks in the flowchart illustrations and / or block diagrams.

[0110] It should be pointed out finally that the above embodiments are only used for illustrating the technical solutions of the present application but not for limiting the protection scope thereof, and although the present application has been described in detail with reference to the above embodiments, it should be understood by those skilled in the art that the specific embodiments of the present application can be changed, modified or replaced equivalently by those skilled in the art after reading the present application, but these changes, modifications or equivalent replacements are all within the protection scope of the claims of the present application to be approved.

Claims

1. A method for dynamically creating a vue component by text, characterized in that, The method comprises the following steps: creating an empty vue component as a parent component and creating a div element in the parent component; adding two attributes in the parent component for receiving local text and obtaining remote text respectively to obtain the text; splitting the obtained text into three parts of template, script and css, wherein the template is the UI interface of the vue component, the script is the specific internal logic of the vue component, and the css is the UI interface style of the vue component; adding a prefix to the class in the css, wherein the prefix consists of a unique string; converting the script into a javascript object, adding a template attribute in the javascript object, and passing the content of the template to the template attribute added in the javascript object; converting the javascript object into a constructor of the vue component; creating a child component through the constructor of the vue component, and passing all the attributes in the parent component to the child component; traversing all the functions in the method attribute in the javascript object, and hijacking all the functions to the child component; bridging the events of the parent component and the child component; mounting the child component to the div element in the parent component through the $mount method in the child component; mounting the css to the div element in the parent component, and completing the creation of the vue component.

2. The method of claim 1, wherein, The two attributes added in the parent component for receiving local text and obtaining remote text respectively are as follows: adding two attributes, code and codeUrl, in the parent component, wherein the code is the local text content, the codeUrl is the address of the text on the remote server, when the codeUrl is valid, the text is obtained from the remote server preferentially, when the text obtained from the remote server fails, the text content in the code is used, and when the codeUrl is invalid, the text content in the code is directly used.

3. The method of claim 1, wherein, The obtained text is split into three parts of template, script and css through a regular expression. The unique string is created by using a guid.

4. The method of claim 1, wherein, The javascript object is converted into the constructor of the vue component through the extend method provided by the vue component.

5. The method of claim 1, wherein, All the functions are hijacked to the child component by using the bind method.

6. The method of claim 1, wherein, The events of the parent component and the child component are bridged as follows:

7. The method of claim 1, wherein, traversing the private attribute_events in the parent component, creating events in the child component by using the same name, and then listening to the events in the child component in the parent component, when the events in the child component are triggered, the events in the parent component are triggered by using the same parameters. ​ 8. A system for dynamically creating vue components through text, characterized in that, The method comprises the following steps: a parent component creation module: used for creating an empty vue component as a parent component and creating a div element in the parent component; an attribute addition module: used for adding two attributes in the parent component, which are respectively used for receiving local text and obtaining remote text; a splitting module: used for splitting the obtained text into three parts of template, script and css, wherein the template is the UI interface of the vue component, the script is the specific internal logic of the vue component, and the css is the UI interface style of the vue component; a prefix module: used for adding a prefix to the class in the css, wherein the prefix comprises a unique string; a first conversion module: used for converting the script into a javascript object, adding a template attribute in the javascript object, and passing the content of the template to the template attribute added in the javascript object; a second conversion module: used for converting the javascript object into a constructor of the vue component; a creation module: used for creating a child component through the constructor of the vue component, and passing all attributes in the parent component to the child component; a traversal module: used for traversing all functions in the method attribute in the javascript object, and hijacking all the functions to the child component; a bridging module: used for bridging the events of the parent component and the child component; a first mounting module: used for mounting the child component into the div element of the parent component through the $mount method in the child component; a second mounting module: used for mounting the css into the div element of the parent component, and completing the creation of the vue component.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, The processor executes the computer program to realize the steps of the method for dynamically creating a vue component through text according to any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, the computer program comprising instructions that, when executed by a computer, cause the computer to perform the method of any one of claims 1 to 9. The computer program is executed by the processor to realize the steps of the method for dynamically creating a vue component through text according to any one of claims 1 to 7.

Images