You can register component in Vue.js in two ways
1 Global registration
2 Local registration
First, we will see global registration
|
1 2 3 |
<div id="root"> <my-address></my-address> </div> |
Thi is the Vue code which creates the global component with the template
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.component('my-address', { template: " <div> 23 Cross Lane</div> " }) new Vue({ el: "#root", data: { } }) |
Then let us see the local registration of component
If you register component locally then it is available for that instance or component. You can use the component instance option of Vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var LocalAddress={template:' <div> Local Address</div> '} new Vue({ el: "#root", data: { }, components :{ 'local-address' : LocalAddress } }) |
Now you can render the component in your html
|
1 2 3 |
<div id="root"> <local-address></local-address> </div> |
Component template should have single root element
So following code does not work
|
1 2 3 4 |
var LocalAddress={template:' <div> Local Address</div> <div> Line 2</div> '} |
Insted, you can use the following code
|
1 2 3 4 5 6 |
var LocalAddress={template:' <div> <div>Local Address</div> <div> Line 2</div> </div> '} |
You can reformat the above code with backslash to improve the redability
|
1 2 3 4 5 6 7 8 9 10 |
var LocalAddress={template:' <div>\ <div>Local Address</div> \ <div>NC</div> \ </div> '} |
Component should have its own data property