Detailed introduction to vue.js divided components

This time I will show you how to group components in Vue.js. What are the precautions for dividing components in Vue.js? Here are practical cases. Let’s take a look. take a look.

For some common pages, everyone can just sit together and type 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

modularityDevelopedFramework, 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 them. 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 together or classify them. There is also a way to divide it according to the page area, header, footer, sidebar. How are Vue components implemented after having components?

How are Vue components implemented? Let’s first take a look at what it looks like in the

file system

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 don’t need to use es6 componentization, you have to use other

requires to write it 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 you can use it

Introducing the communication between Vue components, adhering to a concept, you must first register, the code in the header.vue file, assuming we have data in it is username, and then the method is dothis, we see There is an attribute props and a msg is registered. When our app.vue calls the header component, we can directly write msg in the header attribute and pass any data in app.vue to header.vue. , all are implemented by the Vue 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 case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed practical explanation of the Vue family bucket project

How to implement Ajax with asynchronous requests in native JS

How to use Vuex state management

vue2.0 selects all and inverts the selection in the table

The above is the detailed content of Detailed introduction to vue.js divided components. For more information, please follow other related articles on the PHP Chinese website!