This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Hello everyone, I am a fleshy siege lion, we in the last article mainly introduced the low code platform page designer related to some functions and principles, through the page designer top action bar, the left component list, the middle canvas, the right attribute configuration four parts of the relationship. It can realize the display of component list, drag component to canvas, the effect of property configuration modification on component rendering, and explains how to render a page designed in the page designer.

Although we seem to have implemented component drag and drop to complete the page development, the current page is still unusable because the components in the page are independent and unrelated. Most components in a real page need to communicate with each other. For example, when we click a button, we need to obtain the form value of the form component for submission. Or when we click on a button, a popover pops up. In this article, we will focus on how component interaction is implemented in low-code development.

The event

Classification of events

We rely primarily on events for interaction between components. To satisfy component-to-component, component-to-system, and component-to-server interactions, we can roughly classify events into three categories:

  1. Component methods: Each component exposes methods that other components can call. For the table component, we can expose methods for querying table data; Popover components that expose open, close methods, and so on.
  2. System actions: Some methods do not belong to a component, but are global actions of the system, such as route jumps, global message prompts, explicit and implicit page loading animations, and so on. –
  3. API calls: This class is mainly used to deal with the interaction between a component and the server, namely the invocation of the server API interface.

Definition of events

The definition of system action and API call is relatively simple. We can define methods in the methods of VUE components. For example, we can define a request method for API call, which calls the unified request method encapsulated by AXIOS. The request method supports information such as the URL, method, and API parameters passed into the API. These two types of events are global events, and we can put these methods in mixins and reference them in individual components.

For component methods, we need to define the methods exposed by the component in the methods of each component, and monitor the methods when the component is loaded.

window.vm.$on(`${id}-${methodName}`.params= > {
  // TODO
})
Copy the code

Unlisten when the component is destroyed.

window.vm.$off(`${id}-${methodName}`)
Copy the code

Remember that when the page designer designed the page in our last article, an ID field was attached to the generated component metadata item. This field also plays an important role in event listening, preventing the same component from firing the event repeatedly on the page.

After listening for the event, we can use the EMIT keyword to fire the event.

componentMethod(id, methodName, params) {
  window.vm.$emit(`${id}-${methodName}`, params);
}
Copy the code

When configuring events, you only need to call componentMethod method in Methods.

Event Configuration

In the previous article we talked about, with each component in the designer for a json metadata, we a component’s properties, attributes to the designer configuration areas to form values change, so as to change the component of the whole page json corresponding json, this passage by the same token, when we configure a component event, It also assigns a value to the component’s event property, which we define as event. The property value is a js function string, as shown in the figure below.

Thus, when we execute the event, all we need to do is convert the function string into a function call.

For code editor plug-ins, I recommend ACE, which is relatively mature, rich in functions and easy to use. Here we do not do detailed introduction, interested partners can go to the ACE official website to check.

Event execution

We can use eval or Function to do this. In this case, we’ll use Function.

First we define a string function parsing method called funcStrParse.

function funcStrParse(funcStr) {
  return Function("'use strict'; return (" + funcStr + ")") (); }Copy the code

This method takes a function string and returns a function. To execute, we simply call the function returned by funcStrParse.

funcStrParse("This is a function string.")(ctx);
Copy the code

As you may have noticed, when we execute this function, we pass in a CTX argument, which is actually this in the vue component. As mentioned above, we will define some system methods (via mixin references) and component methods in the Methods in the VUE component. This way, when we write events in the code editor, we can call the methods in the VUE component methods through the CTX variable.

Event parameters

Maybe some friends still have some questions. Now that we can configure to call methods in components, how do we get parameters in other components? As we know, component parameters can be passed in many ways, the most basic of which is through the props property or project/ Inject. Considering that there are many components in the designer, and each component has unique and different component parameters, this can result in too many attributes passed in component tags and can be very inconvenient to retrieve. We need to put the parameters exposed by each component in a common place so that they can be easily used. It is appropriate to define this common place in a Store in VUex. We register the Store module on a page basis, storing all component variables in the pageParams object variable of state in the page Module. As shown in the figure below. Where ID is the id of the component, that is, in the pageParams variable, we take the component ID as the key and the parameter set object of the component as value. This way, we can use it directly in event configuration.

Afterword.

We will share how components interact with each other in the page designer. Is there a better way to do this? Comments are welcome. In later sections, we’ll look at whether we can supplement the list of components on the left by dragging and dropping them onto the canvas when the components provided in the page designer are not enough to support our page design. Interested partners can pay attention to a wave!