How to use Vue components

This article mainly introduces "how to use Vue component". In daily operation, I believe many people have doubts about how to use Vue component. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to use Vue component"! Next, please follow the small series to learn together!

Component encapsulates reusable code, facilitating division of labor, code management and reuse. All Vue components are also instances of Vue.

Note:

1 If the component command uses the hump naming method, you need to change it to hyphen when using the component.

The template attribute specifies a component template that can have only one root node

To sum it up:

Vue Component = Vue Instance = new Vue(options)

####Global Component Creation

//Create component Vue.component("index", { template: 'This is the home page' }) new Vue({ el: "#app", data: {} })

####Creating a local component

let product = { template: 'Here is a list of products' } //Create component Vue.component("index", { template: 'This is the home page:', components:{ product } }) new Vue({ el: "#app", data: {} }) At this point, the study of "how to use Vue components" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!