Một component to làm hết mọi việc thì khó bảo trì. Cách chia là tách từng mảnh thành component nhỏ tái dùng được — mỗi thẻ thành viên là một TheCard riêng. Nhưng component con lấy dữ liệu từ đâu? Nó không tự gọi ORM; nó nhận từ cha qua props. Bài này tách một thẻ ra component con, cho cha truyền dữ liệu xuống, và chỉ ra quy tắc quan trọng: props chảy một chiều.
Component con nhận, component cha truyền
Con khai static props để khai báo và kiểm những gì nó nhận; cha đăng ký con rồi truyền dữ liệu qua thuộc tính trong template:
Hình 1: Con TheCard khai static props = { card: Object } — vừa là tài liệu (nó cần gì) vừa là kiểm tra: truyền sai kiểu hay thiếu prop bắt buộc, OWL báo lỗi ngay. Con đọc dữ liệu qua this.props.card. Cha QuanDashboard khai static components = { TheCard } để được phép dùng <TheCard/>, rồi trong template truyền card="card" cho mỗi phần tử của t-foreach.
Kết quả: bốn thẻ, mỗi thẻ một component
Mỗi vòng t-foreach dựng một TheCard, nhận card của riêng nó:
Hình 2: Mục "Từng thẻ (component con)" gồm bốn TheCard, mỗi cái là một instance component riêng nhận props.card khác nhau. Thẻ VIP-0003 (Vàng) có viền vàng nhờ t-att-class xét props.card.hang_the. Con hoàn toàn không biết gì về ORM hay về ba thẻ kia — nó chỉ biết cái card cha đưa cho. Đây là cách tái dùng: viết TheCard một lần, cha dựng bao nhiêu cái tuỳ ý. Chụp bằng trình duyệt thật, không lỗi Console.
Props chảy một chiều
Đây là quy tắc dễ vi phạm nhất. Dữ liệu đi từ cha xuống con, và con không được sửa props:
Hình 3: Props là một chiều. Con chỉ đọc props.card; gán props.card.x = ... là sai — OWL cảnh báo. Nếu con cần "báo lên" cha (người dùng bấm chọn một thẻ), cha truyền xuống một hàm callback qua props (ví dụ onSelect), và con gọi props.onSelect(...). Nhờ nguyên tắc này, mỗi mẩu dữ liệu chỉ có một nguồn duy nhất (ở cha) — khi có bug, bạn biết chính xác chỗ để sửa.
Vài lưu ý khi dùng props
- Khai
static propscho mọi component nhận dữ liệu. Nó là hợp đồng: OWL kiểm kiểu và bắt lỗi sớm. Prop tuỳ chọn thì{ type: String, optional: true }. static components = { Con }là bắt buộc để dùng<Con/>trong template — thiếu nó, OWL không biết<Con/>là gì.- Truyền hàm để giao tiếp ngược. Không có "emit event" như Vue; quy ước là cha truyền
onXxxxuống, con gọi. Đặt tên bắt đầu bằngoncho rõ. - Đừng nhét cả
this.statecủa cha làm prop rồi để con sửa. Nếu con cần thay đổi, gọi callback để cha sửa state của mình — giữ một chiều.
Ba ý mang về
- Component con nhận dữ liệu qua props: khai
static props = { card: Object }(kiểm kiểu), đọc bằngthis.props.card; cha khaistatic components = { TheCard }và truyềncard="card". - Props chảy một chiều cha → con: con chỉ đọc, không sửa props; muốn báo ngược thì cha truyền hàm callback (
onXxx), con gọi. - Tách component để tái dùng: viết
TheCardmột lần, cha dựng bao nhiêu instance tuỳ ý quat-foreach; mỗi mẩu dữ liệu có một nguồn duy nhất ở cha.
Con nhận props và tự vẽ. Nhưng có những việc component cần làm đúng lúc — nạp dữ liệu trước khi hiện, hay chạm vào DOM sau khi đã vẽ. Phần sau đi vào hooks vòng đời: onWillStart, onMounted — chạy code đúng thời điểm trong đời một component.
