Introduction to VueJS Components

Components are the building blocks of VueJS applications. They allow you to create reusable, self-contained pieces of UI that can be composed to build complex interfaces. This guide covers the basics of creating and using components in VueJS.

Creating a Component

Global Registration

Register a component globally using the Vue.component method:

// JavaScript
Vue.component('my-component', {
  template: '
This is a global component!
'
});

const app = new Vue({
  el: '#app'
});

Local Registration

Register a component locally within a Vue instance:

// JavaScript
const MyComponent = {
  template: '
This is a local component!
'
};

const app = new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

Props

Passing Data to Child Components

Props are used to pass data from parent components to child components:

// JavaScript
Vue.component('child-component', {
  props: ['message'],
  template: '
{{ message }}
'
});

const app = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello from parent!'
  }
});

Emitting Events

Communicating from Child to Parent

Child components can emit events to communicate with parent components:

// JavaScript
Vue.component('child-component', {
  template: 'Click me',
  methods: {
    notifyParent() {
      this.$emit('notify', 'Hello from child!');
    }
  }
});

const app = new Vue({
  el: '#app',
  methods: {
    handleNotification(message) {
      alert(message);
    }
  }
});

Scoped Slots

Using Scoped Slots

Scoped slots allow you to expose data from a child component to a slot in the parent component:

// JavaScript
Vue.component('child-component', {
  template: `
    

      
    
  `
});

const app = new Vue({
  el: '#app'
});

Component Lifecycle

Understanding the component lifecycle is crucial for managing the state and behavior of your components. VueJS provides lifecycle hooks that allow you to execute code at specific stages of a component's lifecycle:

• beforeCreate: Called before the instance is initialized.
• created: Called after the instance is created.
• beforeMount: Called before the component is mounted.
• mounted: Called after the component is mounted.
• beforeUpdate: Called before the component is updated.
• updated: Called after the component is updated.
• beforeDestroy: Called before the component is destroyed.
• destroyed: Called after the component is destroyed.

// JavaScript
Vue.component('lifecycle-demo', {
  template: '
Check the console for lifecycle hooks
',
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  beforeDestroy() {
    console.log('Component before destroy');
  },
  destroyed() {
    console.log('Component destroyed');
  }
});

const app = new Vue({
  el: '#app',
  data: {
    showComponent: true
  }
});

  
  Toggle Component

                

Best Practices

Follow these best practices when working with components in VueJS:

• Use Meaningful Names: Use meaningful and descriptive names for your components.
• Keep Components Small: Keep your components small and focused on a single responsibility.
• Document Props and Events: Document the props and events for each component to make your code easier to understand and maintain.
• Leverage Scoped Slots: Use scoped slots to expose data from child components to parent components.
• Manage State with Lifecycle Hooks: Use lifecycle hooks to manage the state and behavior of your components.

Example Application

Here is an example application that demonstrates the basics of creating and using components in VueJS:

  
Component Basics Example
  
  
  
  
  
  
  
  
    
  
  
  
  Toggle Component




                

Summary

This guide provided an overview of the basics of creating and using components in VueJS, including global and local registration, passing data with props, emitting events, using scoped slots, and understanding the component lifecycle. By following these practices, you can build reusable, maintainable, and modular VueJS applications.