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

This article mainly introduces "whether the control flow v-for instructions should be written into the general structure components". In the daily operation, it is believed that many people have doubts about whether the control flow v-for instructions should be written into the general structure components. The editor consulted all kinds of materials and sorted out simple and useful operation methods. I hope it will be helpful to answer the question of "whether the control flow v-for instruction should be written into the general structure component". Next, please follow the editor to study!

A lonely subcomponent

When nesting starts to increase, if I still want to keep it clean, my default is to extract the code into a new component.

With v-for and v-if, we convert everything in the instruction into its own components.

For example, let's start with this nested template.

{{title}} {{item.title}} {{item.description}}

Next, we extract the contents of the v-for into a new component:

{{item.title}} {{item.description}}

If we import this new component, we will see that it is well rid of all nesting:

{{title}}

There is not much nesting in this example, so it is a bit cumbersome to make a component for a small part of the content. However, if we have two, three, or more nesting levels, this technique can eliminate nested structures and make the code easier to understand.

But there is a question: why don't we also write the v-for directive to the new component?

Should we put the control flow instructions in the new component?

Assuming that our above v-for is put into a new component, we get the following structure:

In this way, the parent component is indeed much clearer. Unfortunately, this reversal puts complexity in the subcomponents:

{{item.title}} {{item.description}}

Which way is better?

If your ultimate goal is to reduce the number of nesting, then this choice must be even worse. We added additional nesting levels to the child components without reducing the nesting levels in the parent component.

In general, I avoid placing control flow instructions such as v-if and v-for at the root of such components because it affects reusability.

What if all I need is a simple ListItem?

Suppose you use v-if, what if you want to use different logic to switch between components, or if you want to use completely different components?

Writing control flow instructions to components with a minimum general structure will limit our flexibility without bringing us more convenience. Therefore, I tend to leave control flow instructions outside such widgets. I also tried to avoid putting them at the root of the component.

Once you have an in-depth understanding of the "bottom" situation, the problem and its solution will be more advantageous.

At this point, the study on "whether the control flow v-for instructions should be written into the general structure components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.