How to realize component Development in Vue

This article introduces the relevant knowledge of "how to achieve component-based development in Vue". Many people will encounter such a dilemma in the operation of actual cases, 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, rewritten as two components of level 1 option and level 2 option respectively (it seems to compare low)

2. Refer to the 4-level linkage component and rewrite it into optional level 1 option or level 2 option (it's a bit of a hassle, I'll have to check that the address hasn't been broken by me)

3, rewrite a universal unlimited linkage menu (convenient and optional)

In the end, I chose 3 and made a new one myself.

As for why there is no integration 2, it is mainly because there are some differences in the different logic of the business pages on which the two components are located:

1 the logic of getting the list may be different, whether to get level 4 at once or only level 1 or level 2 at a time

If this is uncertain, it will have to be dealt with when it is made into a general-purpose component.

2 I play the option directly, and the address is to jump to the new page and then click the option.

I can transfer data by parent-child components, and the address uses vuex (non-parent-son).

In short, the cost of implementation and maintenance is high, and the value of reuse is not so high.

This means that each of the two pages has a component with the same style and different logic.

This is completely 2 components.

Copy their common style parts and implement their business logic within each.

The two components are placed in different plates, independent of each other, and are easy to manage and maintain.

At this time, combined with the vue component diagram, you will be clear.

For component-based development

Divide and conquer (own business logic) is more important than reuse (the same logic)!

Complex business logic combined with vuex is more convenient to realize componentization.

So I understand that componentized components should generally refer to high cohesion and low coupling (a professional term given to me by a certain phper, I don't know if it's right to use it).

This is the end of the content of "how to achieve component-based development in Vue". Thank you for 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!