Khái niệm Component và cách sử dụng
Component là một trong những tính năng quan trọng nhất của Vue.js, giúp chia nhỏ giao diện thành các phần có thể tái sử dụng.
Mục tiêu bài học:
- Hiểu Component là gì và tại sao cần sử dụng Component trong Vue.js.
- Biết cách tạo và đăng ký Component (local và global).
- Học cách truyền dữ liệu giữa các Component.
- Thực hành: Xây dựng một Component hiển thị thông tin người dùng.
Component và cách sử dụng
1. Component là gì? Tại sao cần dùng Component?
- Component là các khối UI nhỏ có thể tái sử dụng.
-
Lợi ích của Component:
- Dễ quản lý code.
- Tái sử dụng trong nhiều phần khác nhau của ứng dụng.
- Dễ mở rộng và bảo trì.
Ví dụ: Trong một trang web có danh sách sản phẩm, mỗi sản phẩm có thể được tách thành một Component riêng biệt.
2. Cách tạo và đăng ký Component trong Vue.js
a) Cách tạo Component trong Vue.js
Component có thể được tạo bằng cách sử dụng app.component() hoặc khai báo trực tiếp trong components của Vue instance.
Ví dụ: Tạo Component đơn giản hiển thị tên người dùng
const UserInfo = {
template: `<p>Xin chào, tôi là {{ name }}!</p>`,
data() {
return {
name: "Nguyễn Văn A"
};
}
};
b) Cách đăng ký Component
Cách 1: Đăng ký Component toàn cục (Global Component)
Khi đăng ký toàn cục, Component có thể được sử dụng ở bất kỳ đâu trong ứng dụng.
const app = Vue.createApp({});
app.component("user-info", UserInfo);
app.mount("#app");
Sau khi đăng ký, có thể sử dụng <user-info></user-info> ở bất kỳ đâu.
Cách 2: Đăng ký Component cục bộ (Local Component)
Chỉ sử dụng Component trong một Component hoặc Vue instance cụ thể.
const app = Vue.createApp({
components: {
"user-info": UserInfo
}
});
app.mount("#app");
Component này chỉ có thể sử dụng bên trong Vue instance chứa nó.
3. Truyền dữ liệu giữa các Component
a) Truyền dữ liệu từ Component cha xuống Component con (Props)
Ví dụ: Component cha truyền dữ liệu name cho Component con thông qua props.
Component con (UserInfo.vue)
const UserInfo = {
props: ["name"],
template: `<p>Xin chào, tôi là {{ name }}!</p>`
};
Component cha (App.vue)
const app = Vue.createApp({
data() {
return {
userName: "Nguyễn Văn B"
};
},
components: {
"user-info": UserInfo
},
template: `<user-info :name="userName"></user-info>`
});
app.mount("#app");
- Component cha truyền dữ liệu
userNamexuống Component con quaprops.
Thực hành: Xây dựng Component hiển thị thông tin người dùng
Yêu cầu:
- Tạo một Component
UserInfo.vuehiển thị tên, email, avatar của người dùng. - Dữ liệu được truyền từ Component cha vào Component con thông qua props.
Bước 1: Cấu trúc thư mục
/project
/index.html
/main.js
/UserInfo.vue
Bước 2: Tạo file index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Component trong Vue.js</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
Bước 3: Tạo file UserInfo.vue
const UserInfo = {
props: ["name", "email", "avatar"],
template: `
<div class="user-card">
<img :src="avatar" alt="Avatar" class="avatar"/>
<h2>{{ name }}</h2>
<p>Email: {{ email }}</p>
</div>
`,
data() {
return {};
}
};
Bước 4: Tạo file main.js
import { createApp } from "vue";
import UserInfo from "./UserInfo.vue";
const app = createApp({
components: {
"user-info": UserInfo
},
data() {
return {
user: {
name: "Nguyễn Văn A",
email: "nguyenvana@gmail.com",
avatar: "https://via.placeholder.com/100"
}
};
},
template: `
<div>
<h1>Thông tin người dùng</h1>
<user-info
:name="user.name"
:email="user.email"
:avatar="user.avatar"
></user-info>
</div>
`
});
app.mount("#app");
Kết quả:
- Ứng dụng hiển thị tên, email, avatar của người dùng.
- Dữ liệu được truyền từ Component cha xuống Component con bằng
props.
Kết luận
Tóm tắt kiến thức quan trọng:
- Component giúp chia nhỏ giao diện, làm cho code dễ quản lý và tái sử dụng.
- Có thể đăng ký Component theo cách toàn cục hoặc cục bộ.
-
Sử dụng
propsđể truyền dữ liệu từ Component cha xuống Component con. - Thực hành: Xây dựng Component hiển thị thông tin người dùng.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com