What are Vue Components?
Vue JS is a JavaScript framework used to develop single-page applications (SPAs). Based on stack-overflow surveys, Vue JS has shown to be one of the most used JavaScript frameworks.
One important feature of Vue is the ability to use components. Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.
How to create Vue components.
Vue components can be defined in two ways, either locally or globally.
Global components
The components are registered globally in your app and can be used anywhere without having to export/import the file it’s contained in. Create a component globally with the following syntax:
vue.component('name of component, {properties}')
It takes two parameters, the name of the component and the object that describes the properties of the component.
From the example above, we have two Vue instances and, since the greeting-card component is defined globally, it can be used in different Vue instances.
Local components
When a component is created locally, it can only be used where it is created.
In the example above, the welcome-card component was created locally by defining the component object to a variable (component name). It is then registered locally in the Vue instance; that is, it can only be used in that Vue instance.
Props
Props are used to pass data from the parent components down to the child components – it follows a unidirectional flow.
Single file components
When creating large web applications with different functionalities, it’s best to break down the application into single file components.
This enables you to have your templates, scripts, and styles all in one file with a .vue file extension:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// instantiate the vue instance
new Vue({
render: h => h(App),
}).$mount('#app')
In the example above, the component was defined in a single file, then imported into the app that was rendered to the DOM through the Vue instance.
Dynamic components
It’s efficient to dynamically switch between components without using a router; this can be done with the dynamic components. The syntax works as follows:
<component v-bind:is=”currentComponent”></component>
- The
component tagmust be used - The
isattribute takes the current component and switches it.
Here is an example of how it can be used:
<!-- Creating the component -->
<template>
<div class='purple-card'>
<p> The Purple Card
</div>
</template>
<script>
export default {
name: 'purpleCard',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.purple-card{
width:50%;
height:100px;
border-radius:20px;
text-align:center;
background-color:#472383;
}
</style>From the example, two different components were defined in the app.
The :is bind attribute makes it possible to dynamically assign the current component; then, the button events are used to switch between the two components.
When naming components, it’s important to note that it can be done in two ways:
- Kebab case
my-component-name
- Pascal case
MyComponentName
Summary
This shote covered a comprehensive overview of Vue components. We have learned what Vue components are, how they can be defined, how they are used, and how dynamic components and single file components work.
