Slot trong VueJS là gì nhỉ? Để cho con 1 slot mẹ nhé…

Tram Ho

Đúng như tiêu đề mình có đề cập. Slot theo đúng nghĩa đen là “Chỗ” luôn.

  • Để cho con 1 chỗ trong component Vue mẹ nhé
  • ok con trai

Slot là đặt chỗ

Slot trong vue là dạng “đặt chỗ” trong component, sau này khi sử dụng ta có thể đưa nội dung khác vào những vị trí đã đặt chỗ.
Vue cho phép chúng ta đặt nhiều chỗ, số lượng tùy thích, nhà có điều kiện mà =)))) Mỗi chỗ ấy được gọi là “slot”
Mọi người cùng xem ví dụ sau nhé (Chán component cha rồi, chuyển sang chơi với mẹ cho thân thiện 😄)

Vậy là con đã thay đổi cái component mẹ sinh ra với 2 chỗ mà mẹ đã đặt chỗ trước cho con là image và name

Slot name

Như ví dụ trên ta thấy thì khi slot có name, và truyền name vào cho slot thì chỉ slot có name ấy mới bị change, những thứ còn lại vẫn nguyên vẹn
Còn nếu slot ko tên thì toàn bộ những gì truyền vào sẽ được chuyển vào slot hết

Slot scope

Đề truyền dữ liệu từ mẹ sang con, chúng ta bind dữ liệu muốn truyền qua slot <slot :ten-bien=”du-lieu”/>

Một ví dụ để thấy lợi ích của slot trong thực tế.

Khi mới nhận thiết kế từ bên design, popup modal vô cùng đơn giản, chỉ gồm title, description và dâm ba cái button bên dưới. Thoạt nhìn chúng ta chỉ cần 3 cái prop và một sự kiện bắn ra khi click button để thay đổi tùy theo tình huống sử dụng.

Nhưng sau một thời gian, bên design họ vẽ vời thêm một mớ mới, nhúng form, chèn hẳn một component khác vào trong đó, vâng vâng. Prop không đáp ứng nổi độ khùng của mấy bạn design. Và cách mà chúng ta refactor lại cái modal bằng slot

Với việc sử dụng slot bạn sẽ có những component với khả năng xào đi nấu lại dễ hơn.
Hi vọng với thủ thuật này mọi người sẽ làm chủ được component một cách linh động hơn (y)

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo