Component và props hoạt động như thế nào trong Vue?

Question

Accepted Answer

**Component** là các phần UI tái sử dụng, độc lập. **Props** là cách một component cha truyền dữ liệu *xuống* cho component con — chúng là các đầu vào có kiểu, chỉ đọc của component con. ## Khai báo props trong component con ```vue ``` ## Truyền props từ component cha ```vue ``` Lưu ý khác biệt: `name="Ann"` truyền một chuỗi nguyên văn, còn `:age="30"` (với `v-bind`) đánh giá một biểu thức — cần thiết cho số, boolean, object, hoặc biến. Cũng lưu ý tên prop là `camelCase` trong JS nhưng `kebab-case` trong template (`isAdmin` → `:is-admin`). ## Props là một chiều và chỉ đọc ```js props.name = "Bob"; // ❌ Vue cảnh báo — không bao giờ thay đổi một prop ``` Dữ liệu chảy **xuống** (cha → con). Component con không được sửa đổi props của nó; nếu cần thay đổi gì đó, nó hoặc dùng một bản sao cục bộ hoặc **phát ra một sự kiện** yêu cầu component cha thay đổi nguồn ("props xuống, events lên"). Luồng một chiều này giữ dữ liệu dễ dự đoán. ## Props với TypeScript ```vue ``` ## Tại sao điều này quan trọng Component + props là nền tảng của kiến trúc Vue — bạn ghép UI từ các component tái sử dụng và cấu hình chúng qua props. Hiểu rằng props là **một chiều và chỉ đọc** (dữ liệu xuống, sự kiện lên) là mô hình tư duy cốt lõi giúp app Vue dễ dự đoán; thay đổi props hoặc kỳ vọng luồng prop hai chiều là nguồn lỗi kinh điển.