Để tạo 1 component
trong vue js bạn có thể làm bằng nhiều cách, tùy thuộc vào từng trường hợp cụ
thể mà bạn có thể chọn giải pháp sử dụng props hoặc slots.
Tuy nhiên nếu bạn sử dụng
props, mọi thứ có thể hơi bị mất kiểm soát, đặc biệt là khi bạn phải tạo rất
nhiều biến và các custom options. Để minh họa cho vấn đề này tôi đã tạo ra 2
phiên bản của 1 component, tôi đặt tên nó là CustomButton component, 1 cái sử dụng
props, 1 cái sử dụng slot.
Dưới đây là phiên bản
CustomButton sửa dụng props:
Bạn có thể thấy là ta
có vài cái options để tùy chỉnh component này thông qua props. Nó cho thấy bạn có thể hiển
thị 1 icon trước dòng text, sau dòng text, thay đổi được nội dung text và màu của
CustomButton component này.
Còn đây là cách tôi sử
dụng component này (trong vd này chúng ta sử dụng nó trực tiếp trong App.vue)
Như đã thấy thì việc sử
dụng component như này là khá phổ biến khi chúng ta sử dụng props. Bên trong CustomButtonWithProps
component dễ thấy là nó bắt đầu có 1 chút lộn xộn, ta có 1 component khá
lơn và thực sự hơi cồng kềnh. Nó chỉ ra 1 vấn đề là ta có muốn show icon hay
không mà không thể thay đổi được icon mà cần thêm ít nhất là 1 props nữa để làm
được điều đó. Cũng tương tự với yêu cầu đổi được màu sắc ta phải thêm props cho
component, rồi thì change font-size, font-weight, ...
Còn sau đây là cách sử
dụng với slot, cách này có vẻ như hỗ trợ ta tạo các components linh hoạt hơn
nhiều.
Đây là CustomButtonWithSlots
component:
Trông sạch sẽ gọn gàng
hơn nhiều nhỉ ? Đó là bởi vì chúng ta không cần phải truyền các props cho nó, mọi
thứ ta muốn render cho component giờ đây sẽ được gán bên trong parent-component
mà trường hợp này là App.vue:
Nhược điểm của phương
pháp này là component cha sẽ trở nên cồng kềnh hơn chút. Ngoài nhược điểm đó
thì chúng ta lại nhận được toàn những điểm tích cực sau:
- Là phương pháp linh hoạt hơn nhiều: Chúng ta có thể gán, thay đổi bất cứ icon chúng ta muốn trong cả 2 slots, không cần phải xác định trước bất cử icon nào trong CustomButtonWithSlots component giúp cho component trở nên dễ dùng hơn.
- Thậm chí ta có thể truyền những components khác tới component CustomButtonWithSlots VD: thay vì sử dụng fontawesome-icon ta có thể dùng Image/Icon-component của riêng mình,...
- Bạn không cần phải đau đầu với các điều kiện if-else bên trong component CustomButtonWithSlots bạn có thể truyền dữ liệu hoặc không mà không cần kiểm tra là nó đã ở có hay chưa.
- Cuối cùng chính là component của bạn sẽ trở nên dễ đọc và ít lộn xộn hơn nhiều.
Xin lưu ý là đây chỉ
là 1 ví dụ nhỏ nhưng khi component của bạn càng lớn nó sẽ càng dễ mà gây nhầm lẫn
hơn cho những người khác.
Tôi không có nói props
là tệ, chúng tồn tại rõ ràng là phải có lý do. Nhưng cho những components lớn
hơn và phức tạp hơn thì bạn có thể cân nhắc sử dụng slots thay cho props.
Nếu bạn viết component
của bạn sử dụng slots, bạn sẽ cho chính mình và team của mình trở nên linh hoạt
hơn và code cũng sẽ dễ đọc hơn.
Nguồn Medium: Quansolid lược dịch
Nguồn Medium: Quansolid lược dịch
0 comments:
Post a Comment