Slot
trong VueJS là gì?
Slot
trong VueJS là gì?
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.
<slot>
ở những vị trí mà bạn muốn chèn nội dung từ component cha.<slot>
tương ứng.<!-- 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
.
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.
junior
Gợi ý câu hỏi phỏng vấn
Chưa có bình luận nào