How Vue.js divides components

What I bring to you this time is how to group pieces in Vue.js. This article will give you a good analysis.

For some common pages, everyone can sit together and type the code. After this page is completed, other pages can be created. However, as a system with complex functions, it is especially suitable to use some

modularizationDevelopedFramework, this will appear very inefficient, so we will simply look at how to divide components in Vue.

In summary, there are two ways to divide it. One is the functional blocks on the page, select, pagenation, and some parts that require a lot of code to implement. We can extract them and put them in group together or classify. There is also a way to divide it according to the page area, header, footer, sidebar. How are Vue components implemented after having components?

APP.vue is an entrance to the project, and the components we divided are also

objects. In APP.vue, we use import to import each component Import, header refers to the header.vue file on the right. This writing method is a writing method of es6. Of course, if you do not need to use es6 componentization, you must also use some other requires to write and perform a packaging process. , if you just introduce these two components into app.vue Inside, these two components are still not available on the page.

In Vue, this component must be registered through components, and the imported Put it in, and then write

and at the template level. After rendering, the template level will become the contents of header.vue and footer.vue. One thing to note is that Vue must be registered before it can be used.

Introducing the communication between Vue components, adhering to a concept, you must first register, the code in the header.vue file, assuming we have The data is username, and the method is dothis. We see that there is a

propertyprops, and a msg is registered. When our app.vue calls the header component, we can directly add it to the header property. Write msg, and pass any data in app.vue to header.vue. Everything is implemented by Vue's mechanism. If msg is not written here in header.vue, the attributes cannot be obtained.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

About HTTP/2 server push

nvm’s method of managing different versions of nodes

How to determine whether the CheckBox selected is empty

The above is the detailed content of How Vue.js divides components. For more information, please follow other related articles on the PHP Chinese website!