Slot và scoped slot là gì?

Question

Accepted Answer

**Slot** cho phép một component cha truyền **nội dung template** vào một component con — đó là cách bạn xây dựng các wrapper linh hoạt, tái sử dụng (card, modal, layout) nơi người dùng kiểm soát markup bên trong. ## Slot cơ bản ```vue ``` ```vue

Title

Any content!

``` Component con định nghĩa một "lỗ trống" (``); component cha lấp nó bằng bất kỳ markup nào nó muốn. Cách này linh hoạt hơn nhiều so với truyền chuỗi qua props. ## Named slot — nhiều điểm chèn ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slot — component con truyền dữ liệu LÊN cho nội dung slot Đôi khi component con có dữ liệu mà slot của cha cần (ví dụ mỗi item trong một danh sách). **Scoped slot** phơi bày dữ liệu từ con cho template của cha: ```vue ``` ```vue ``` Scoped slot là chìa khóa cho **component renderless/headless**: component con xử lý logic (lặp, fetch, state) và để component cha kiểm soát hoàn toàn phần trình bày. ## Tại sao điều này quan trọng Slot là cơ chế phân phối nội dung của Vue — thiết yếu cho các component layout và wrapper tái sử dụng. Named slot cung cấp nhiều điểm chèn, và scoped slot (phơi bày dữ liệu của con cho template do cha định nghĩa) cho phép các mẫu mạnh mẽ như component headless và list/table tùy biến được. Chúng là thứ khiến component Vue mang tính ghép nối thay vì cứng nhắc.