Vue – Component
Component
Vue component is same as React Component and Angular directive.
One page has a lot of UI component inside, and some are independent and some are dependent.
Consider several page, there are a lot of common parts.
Sometimes, one component should be re-usable(easy to use any parts).
Basic Template
Vue.component
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <list-title></list-title> </div> <script> Vue.component('list-title', { template: '<h1>Title</h1>' }) new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
This is simple component example. Use template and use it inside Vue range.
Vue.component, Vue.extend
It’s good explain from stackoverflow. component calls extend inside.
Parent – Child : Simple case
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <fruits-list-parent></fruits-list-parent> </div> <script> var fruitsListChild = Vue.extend({ template: '<h1>{{name}}</h1>', data : function() { return { name: 'test' } } }) var fruitsListParent = Vue.extend({ template: '<div>Parent<fruits-list-child></fruits-list-child></div>', components: { 'fruits-list-child': fruitsListChild } }) new Vue({ el: '#app', components: { 'fruits-list-parent': fruitsListParent }, data: { message: 'Hello Vue.js!', name: 'List' } }) </script> </body> </html>
Vue object use custom component named ‘fruits-list-parent’,
fruits-list-parent uses custom component named ‘fruits-list-child’.
Parent should register child custom as components data inside.
Also, child component has data: function() { return }
It means that data is valid only this component.
Separate File
This is next step. I will explain another post.