The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Introduction to Components

Next ►
►

Components are one of the most powerful features of Vue.js. They allow you to build large-scale applications that are composed of small, self-contained, and often reusable pieces. In this section, we will cover the basics of Vue.js components, including how to create, register, and use them.

Key Concepts

  1. What is a Component?

    • A component is a reusable piece of the user interface.
    • Each component is a Vue instance with its own data, methods, and lifecycle hooks.

  2. Creating a Component

    • Components can be created using the Vue.component method or by defining them locally within a Vue instance.

  3. Registering a Component

    • Components can be registered globally or locally.

  4. Using a Component

    • Once registered, components can be used in the template of a Vue instance or another component.

Creating a Component

Global Registration

To create and register a component globally, you use the Vue.component method. Here’s an example:

// Define a new component called 'my-component'
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

// Create a new Vue instance
new Vue({
  el: '#app'
});

In the HTML:

<div id="app">
  <my-component></my-component>
</div>

Local Registration

To register a component locally within a Vue instance, you define it in the components option:

// Define a new component
const MyComponent = {
  template: '<div>A custom component!</div>'
};

// Create a new Vue instance
new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

In the HTML:

<div id="app">
  <my-component></my-component>
</div>

Using a Component

Once a component is registered, you can use it in the template of a Vue instance or another component by using its custom element tag:

<div id="app">
  <my-component></my-component>
</div>

Practical Example

Let's create a more practical example where a component displays a message passed to it as a prop.

Defining the Component

Vue.component('message-display', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

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

Using the Component

In the HTML:

<div id="app">
  <message-display message="Hello, Vue!"></message-display>
</div>

Explanation

  • Props: Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
  • Template: The template defines the HTML structure of the component. In this case, it displays the message prop.

Exercises

Exercise 1: Create a Counter Component

  1. Create a component called counter-component that displays a button and a count.
  2. When the button is clicked, the count should increase by 1.

Solution:

Vue.component('counter-component', {
  data: function() {
    return {
      count: 0
    };
  },
  template: '<button @click="count++">You clicked me {{ count }} times.</button>'
});

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

In the HTML:

<div id="app">
  <counter-component></counter-component>
</div>

Exercise 2: Create a User Card Component

  1. Create a component called user-card that accepts name and age as props.
  2. Display the user's name and age inside the component.

Solution:

Vue.component('user-card', {
  props: ['name', 'age'],
  template: '<div><h2>{{ name }}</h2><p>Age: {{ age }}</p></div>'
});

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

In the HTML:

<div id="app">
  <user-card name="John Doe" age="30"></user-card>
</div>

Common Mistakes and Tips

  • Forgetting to Register Components: Ensure that your components are registered either globally or locally before using them.
  • Props Validation: Use the props option to validate the types of props your component expects.
  • Component Naming: Use kebab-case for component names in templates to avoid conflicts with HTML elements.

Conclusion

In this section, we covered the basics of Vue.js components, including how to create, register, and use them. Components are fundamental building blocks in Vue.js applications, enabling you to build complex UIs from small, reusable pieces. In the next section, we will dive deeper into props and custom events, which are essential for component communication.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved