Components Basics in Vue.JS
Before starting first know,
What are the Components?
Components are the most powerful features of Vue, It helps to extend basic HTML elements to encapsulate reusable and more readable code. To create a Vue Component do the following.
Creating Components:-
The template key is where you write your markup for that component. In the same Object, you can add functionalities later. You can create an instance of your component by adding <my-component></my-component> in the HTML.
This will result in the following on the page:
A Custom Component!Reusing Components:-
Components can be reused as many times as you want.
Each time you use a component, a new Instance of the component is created.
Organizing Components:-
In an app, there can be organized nested components.
For example, You might have components for a Header, Footer, Sidebar, etc. and each can contain other components like Navigation Links, posts, etc.
To use these components in templates, they must be registered so that Vue knows about them. There are two types of component registration: global and local. Currently, we are only registering components globally, using Vue.component.
Globally registered components can be used in the template of any root Vue instance ( new Vue ) created afterward — and even inside all subcomponents of that Vue instance’s component tree. If you want to know more, you can go through Component Registration
Passing Data to Child Components using Props:-
Props are custom attributes. it can be registered to a component. When a value is passed to a prop attribute, it becomes a property of that component.
To pass a title to our ‘my-component’ component, we can include it in the list of props this component accepts, using a props option.
A component can have many props as you’d like, any value can be passed to any prop.
Once a prop is registered, you can pass data to it as a custom attribute. as following:-
This will result in the following on the page:
