Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the recursive methods and usage problems of components in Vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. The first problem is to loop the form; look at the picture below

Then the data here returns something like this:

Explain the meaning of the data field below: the name attribute is a table header, and then the valueType in it represents a variety of different input boxes For example, the above 7 represents the ordinary drop-down box, then 6 is the ordinary input box, and 1 is the Boolean drop-down box (in fact, 1 and 7 are the same at the front end, but it should be noted that the drop-down box in Element determines that the double equals sign is used, which means that Boolean true equals character conversion false and true=='false' is correct, so it needs to be formatted here) If it is equal to 8, it means that this is another subform. If there is a corresponding editData field, and this data needs to be recursive again.

Let's take a look at my process of formatting data:

FormatterData (editDataAjax, id) {editDataAjax.map (item = > {/ / if it is type 8, you need to expand the data if (item.valueType = = 8) {item.editData = []; item.expanded = false again } / / if it is an enumerated type or a Boolean type, you need to format data for him to create option if (item.valueType = = 7 | | item.valueType = = 1) {item.option = []; for (const key in item.data) {if (item.data.hasOwnProperty (key)) {const element = item.data [key] If (item.valueType = = 1) {/ / if it is a Boolean type, change it to Boolean item.option.push ({value: key = = "true"? True: false, label: element});} else {item.option.push ({value: key, label: element});});}

The last point to note here is that if you cycle through the creation of input boxes and drop-down boxes, you need to use v-model format. If you simply bind value mode, there will be problems, which require special attention. Please see the following code.

2. The use of recursive components

First of all, I would like to talk about how to use recursive components, that is, my component file is called fromItem.vue;, and then my name name is also fromItem (there must be name). The recursive use of components is actually the same as using other components; you need to introduce

Import fromItem from'. / fromItem'

And then register.

Components: {fromItem}

When you use it, it's the same.

But at this time, our data will change accordingly:

When we assign a value to the parent's editData, the first level will come out, let's assign a value to any editData in the parent, and there will be child component recursion. At this time, no matter how many layers there are, the corresponding form will appear.

3. Collation and construction of data

At the beginning, I put the data function of each request in the child component, that is, the fromItem.vue file, but in this way, each request to the latest data, if I do not save the last data, then there will be no parent form, only a child form; if it is saved, I need to call the method of the parent component to save a lot of data after each request is completed. Makes it difficult to understand.

So the way we use now is that the child component file, that is, the fromItem.vue component, does not do any data processing, but just accepts and displays the data; the request, collation, and final editing and saving of the data are all done in the parent component, so that it will not cause data confusion. After all, the more you do, the easier it is to make mistakes in recursion.

This is the end of the content of "what are the methods and usage problems of component recursion in Vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.