Mastering Vue 3: A Comprehensive Guide to Building Modern Web Applications <Part 7 />
Hany Taha
Posted on February 4, 2024
Content:
2. Mastering Vue 3 - Part 2 [Benefits of using Vue 3 for web development]
3. Mastering Vue 3 - Part 3 [Template syntax in Vue 3]
4. Mastering Vue 3 - Part 4 [Reactivity Fundamentals]
5. Mastering Vue 3 - Part 5 [Class and Style Bindings]
6. Mastering Vue 3 - Part 6 [Lifecycle Hooks]
7. Mastering Vue 3 - Part 7 [Understanding components]
8. Mastering Vue 3 - Part 8 [Installing Vue project and file structure]
9. Mastering Vue 3 - Part 9 [Vue Router in Vue 3]
10. Mastering Vue 3 - Part 10 [Animation in Vue 3]
11. Mastering Vue 3 - Part 11 [State Management with Pinia]
12. Mastering Vue 3 - Part 12 [Teleport in Vue 3]
13. Mastering Vue 3 - Part 13 [Working with API Calls ]
14. Mastering Vue 3 - Part 14 [Forms and Form Validation ]
Understanding components in Vue 3
Components in Vue 3 are reusable and self-contained units of UI that encapsulate the HTML, CSS, and JavaScript logic required to render a specific part of a user interface. They promote modularization, code reusability, and easier maintenance by breaking down complex UIs into smaller, manageable pieces.
**Here are some key points about components in Vue 3:
1. Component Structure:
A Vue 3 component consists of three parts: template, script, and style.
1- The template contains the HTML structure and defines the component's markup.
2- The script section contains the JavaScript logic for the component, including data properties, methods, computed properties, and lifecycle hooks.
3- The style section contains CSS styles specific to the component.
Example:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!',
};
},
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Explanation: In this example, the component has a simple structure. The template contains an <h1> element that displays the message data property. The script section defines the data property with an initial value of 'Hello, Vue 3!'. The style section contains a scoped style that makes the text color of the <h1> element blue.
2. Component Composition:
Components can be composed hierarchically, allowing for the creation of complex UIs from smaller, reusable components.
Parent components can include child components by using custom HTML tags.
Components can pass data to child components using props and receive data back using events.
Example:
<template>
<div>
<ChildComponent :name="user.name" :age="user.age" @updateAge="updateAge" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
user: {
name: 'John',
age: 25,
},
};
},
methods: {
updateAge(newAge) {
this.user.age = newAge;
},
},
};
</script>
Explanation: In this example, the parent component (ParentComponent) includes the child component (ChildComponent) using the custom HTML tag <ChildComponent>. The parent component passes the name and age props to the child component, and listens to the updateAge event emitted by the child component. When the event is emitted, the parent component's updateAge method is called to update the age property.
3. Data and Props:
Each component can have its own data properties, which are reactive and can be accessed in the template and script sections.
Props are used to pass data from parent components to child components.
Props are declared in the component's script section and can be type-checked for improved code reliability.
Example:
<template>
<div>
<h1>{{ message }}</h1>
<ChildComponent :name="user.name" :age="user.age" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello, Vue 3!',
user: {
name: 'John',
age: 25,
},
};
},
};
</script>
Explanation: In this example, the parent component has a message data property and a user data property. The message property is displayed in the parent component's template, and the user object is passed as props to the child component (ChildComponent) using the :name and :age syntax.
4. Component Lifecycle Hooks:
Vue 3 provides a set of lifecycle hooks that allow you to execute code at specific stages of a component's lifecycle.
Common lifecycle hooks include created, mounted, updated, and beforeUnmount.
Lifecycle hooks provide opportunities to perform tasks such as fetching data, setting up event listeners, or cleaning up resources.
Example:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!',
};
},
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
},
updated() {
console.log('Component updated');
},
beforeUnmount() {
console.log('Component before unmount');
},
};
</script>
Explanation: In this example, the component includes lifecycle hooks such as created, mounted, updated, and beforeUnmount. Each hook represents a specific stage in the component's lifecycle. When the component is created, mounted, updated, or about to be unmounted, the corresponding hook is triggered, and the associated console log is executed.
5. Component Communication:
Components can communicate with each other through props and events.
Props allow parent components to pass data down to child components, while events enable child components to emit events that the parent components can listen to and respond to.
Example:
ParentComponent.vue
<template>
<div>
<ChildComponent :message="message" @updateMessage="updateMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
message: 'Hello, Vue 3!',
};
},
methods: {
updateMessage(newMessage) {
this.message = newMessage;
},
},
};
</script>
ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
<button @click="updateParentMessage">Update Parent Message</button>
</div>
</template>
<script>
export default {
props: {
message: String,
},
methods: {
updateParentMessage() {
this.$emit('updateMessage', 'New message from child');
},
},
};
</script>
Explanation: In this example, the parent component (ParentComponent) includes the child component (ChildComponent). The parent component passes the message prop to the child component, and listens to the updateMessage event emitted by the child component. When the button is clicked in the child component, the updateParentMessage method is called, which emits the updateMessage event with a new message. The parent component's updateMessage method is triggered and updates the message property.
6. Scoped Styles:
Vue 3 supports scoped styles, where CSS styles defined in the component's style section only apply to the component's template, preventing style conflicts with other components.
Example:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!',
};
},
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
Explanation: In this example, the component has a scoped style defined in the style section. The scoped attribute ensures that the style only applies to the component's template and doesn't affect other components. The style sets the text color of the <h1> element to blue.
7. Slots:
Slots allow components to receive and render content from the parent component.
They provide a way to create flexible and customizable components.
Components define slots in their template, and the parent component can pass content into the slots when using the component.
Example:
ParentComponent.vue
<template>
<div>
<ChildComponent>
<p>Slot content</p>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue 3!',
};
},
};
</script>
Explanation: In this example, the parent component (ParentComponent) includes the child component (ChildComponent) and provides slot content between the opening and closing tags of the child component. The child component renders the provided slot content using the <slot></slot> syntax. In this case, the slot content is a <p> element with the text "Slot content".
8. Composition API:
Vue 3 introduces the Composition API, which provides an alternative way to organize and reuse component logic.
It allows you to group related logic together rather than separating it into options like data, methods, and computed properties.
The Composition API provides hooks like reactive, computed, and watch to manage component state and reactivity.
Example:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
message: 'Hello, Vue 3!',
});
const changeMessage = () => {
state.message = 'New message!';
};
return {
message: state.message,
changeMessage,
};
},
};
</script>
Explanation: In this example, the component uses the Composition API. The setup function is the entry point for the Composition API. Inside the setup function, the reactive function is used to create a reactive object called state with a message property. The changeMessage function updates the message property. The message property and the changeMessage function are returned from the setup function and made accessible in the component's template.
Conclusion, Components are a fundamental concept in Vue 3, empowering developers to build complex UIs by composing smaller, reusable units. With features like props, events, scoped styles, and the Composition API, components offer flexibility, maintainability, and code reusability in Vue 3 applications.
The above examples illustrate the various aspects of components in Vue 3, including their structure, composition, data and props, lifecycle hooks, communication, scoped styles, slots, and the Composition API.
Posted on February 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
March 12, 2024
