Knowledge sharing

Component Basic Information Components makes your code more reusable and your markup more readable. When registering a component, it will always be given a name. The template key is where you write your markup for that component. In the same object you’ll later add more functionalities.  Vue.component('header-component', {         template: '<div>A custom header component!</div>' }) new Vue({      el: '#app' }) You create an instance of your component through adding <header-component></header-component> in the HTML: <div id="app"> <my-component></my-component> </div> Props Props will enable you to pass data into a component instance from the outside of that component. or more correctly, pass the data down from a parent. //My-component is child component Vue.component('my-component', {         props: ['message'], ...