Trong Vue.js, slot là một cơ chế cho phép bạn composes (ghép nối) các component với nhau bằng cách chèn nội dung tùy chỉnh vào một phần của template của component. Slot hoạt động như một outlet nơi bạn có thể chèn nội dung được cung cấp bởi component cha vào một vị trí xác định trong template của component con.
Cách hoạt động của Slot:
Trong template của component con, bạn sẽ định nghĩa một hoặc nhiều thẻ <slot> ở những vị trí mà bạn muốn chèn nội dung từ component cha.
Component cha sau đó có thể truyền nội dung vào bên trong thẻ mở và đóng của component con, và nội dung này sẽ được hiển thị tại vị trí của thẻ <slot> tương ứng.
Ví dụ:
htmlCopy
<!-- Component con -->
<template>
<button class="fancy-btn">
<slot></slot>
<!-- slot outlet -->
</button>
</template>
<!-- Sử dụng component con trong component cha -->
<FancyButton>
Click me!
<!-- slot content -->
</FancyButton>
Trong ví dụ trên, "Click me!" là nội dung slot được cung cấp bởi component cha và sẽ được hiển thị trong thẻ <slot> của component FancyButton.
Lợi ích của Slot:
Tái sử dụng và linh hoạt: Slot giúp các component trở nên linh hoạt và tái sử dụng bằng cách cho phép bạn chèn nội dung tùy chỉnh vào các khuôn mẫu đã định sẵn.
Kiểm soát layout: Slot cho phép component cha kiểm soát cách nội dung được sắp xếp và hiển thị trong component con.
Nội dung động: Bạn có thể truyền nội dung động, bao gồm cả các component khác, vào trong slot, tạo ra các cấu trúc UI phức tạp và mạnh mẽ.
Vue.js cũng hỗ trợ các khái niệm như "scoped slots" và "named slots", cho phép bạn truyền dữ liệu vào slot hoặc định nghĩa nhiều slot với các tên khác nhau trong cùng một component. Scoped slots cung cấp khả năng truy cập vào dữ liệu từ component con, trong khi named slots cho phép bạn xác định nhiều khu vực khác nhau trong một component để chèn nội dung.
