Scoped slots trong Vue 2 là một tính năng mạnh mẽ cho phép bạn tạo các component linh hoạt và có thể tái sử dụng. Scoped slots cho phép bạn truyền dữ liệu từ component con trở lại component cha, giúp bạn kiểm soát tốt hơn nội dung được render bên trong slot.

Cách hoạt động của Scoped Slots

Khi bạn sử dụng scoped slots, bạn có thể truyền một template vào slot thay vì một phần tử đã render. Điều này có nghĩa là template sẽ có quyền truy cập vào dữ liệu của component con, mặc dù nó được render trong phạm vi của component cha12.

Ví dụ, giả sử bạn có một component <current-user> với template như sau:

<span><br>  <slot>{{ user.lastName }}</slot><br></span>

Khi sử dụng component này, bạn có thể muốn render ra first name của user thay vì last name:

<current-user><br>  {{ user.firstName }}<br></current-user>

Để làm điều này, bạn cần sử dụng scoped slots để bind dữ liệu user cho phần tử slot

Lợi ích của Scoped Slots

• Tính linh hoạt: Cho phép bạn tùy chỉnh nội dung bên trong component con từ component cha.
• Tái sử dụng: Giúp bạn viết ít mã hơn và tránh vi phạm nguyên tắc DRY (Don’t Repeat Yourself).
• Kiểm soát tốt hơn: Bạn có thể kiểm soát dữ liệu và cách hiển thị nội dung một cách chi tiết hơn