Cách dùng Slot trong Svelte

Slot tiến hành chuyển dữ liệu từ thành phần này sang thành phần khác dễ dàng hơn. Hãy cùng nhau học cách dùng Slot trong Svelte để tạo ra những thành phần năng động nhé!

Svelte cung cấp nhiều cách cho các thành phần giao tiếp với nhau, bao gồm prop, slot… Bạn cần tích hợp slot để tạo ra thành phần linh hoạt và có thể tái sử dụng trong ứng dụng Svelte.

Slot trong Svelte là gì?

Slot trong framework Svelte hoạt động tương tự như slot trong Vue. Chúng cung cấp cách truyền nội dung từ thành phần gốc tới con. Với slot, bạn có thể xác định các placeholder trong một mẫu của thành phần, tại nơi bạn có thể chèn nội dung từ thành phần chính.

Nội dung này có thể là văn bản thuần túy, markup HTML hoặc thành phần Svelte khác. Làm việc với các slot cho phép bạn tạo những thành phần có thể tùy biến và linh động cao, đáp ứng những mục đích sử dụng khác nhau.

Tạo slot cơ bản

Để tạo slot trong Svelte, dùng thành phần slot trong một mẫu của thành phần. Slot là placeholder cho nội dung bạn sẽ chuyển từ thành phần gốc. Mặc định, slot này sẽ hiện bất kỳ nội dung được chuyển vào nó.

Đây là ví dụ cách tạo một slot cơ bản:

<main>
  This is the child component
  <slot></slot>
</main>

Khối code trên hiện thành phần con dùng slot để lấy nội dung từ thành phần gốc.

Để chuyển nội dung từ thành phần gốc tới thành phần con, đầu tiên bạn nhập thành phần con vào thành phần gốc. Sau đó, thay vì dùng tag self-closing để hiện thành phần con, dùng một tag mở và đóng. Cuối cùng, trong tag của thành phần, viết nội dung bạn muốn chuyển từ thành phần parent-to-child.

Ví dụ:

<script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span>This is a message from the parent component</span>
 </Component>
</main>

Ngoài việc chuyển nội dung từ các thành phần parent-to-child, bạn có thể cung cấp nội dung dự phòng/mặc định trong slot. Đây là nội dung mà slot sẽ hiện nếu thành phần gốc không chuyển bất kỳ nội dung nào.

Đây là cách bạn có thể chuyển nội dung dự phòng:

<main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

Khối code này cung cấp văn bản “Fallback Content” dưới dạng nội dung dự phòng cho slot hiển thị nếu thành phần gốc không có nội dung.

Chuyển dữ liệu qua slot bằng slot prop

Svelte cho phép bạn chuyển dữ liệu tới slot bằng các slot prop. Bạn dùng slot prop trong các tình huống muốn chuyển một số dữ liệu từ thành phần con tới nội dung đang đưa vào.

Ví dụ:

<script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

Khối code trên hiện một thành phần Svelte. Trong tag script, bạn khai báo biến message và gán text "Hello Parent Component!" cho nó. Bạn cũng chuyển biến message cho thuộc tính slot message. Điều này làm dữ liệu thông báo có sẵn cho thành phần gốc khi nó đưa nội dung vào vị trí này.

<script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

Cú pháp let:message cho phép thành phần gốc truy cập thuộc tính slot message mà thành phần con cung cấp. Biến message của tag div là dữ liệu từ thuộc tính slot message.

Lưu ý rằng, bạn không bị giới hạn trong một thuộc tính slot duy nhất, bạn có thể chuyển nhiều thuộc tính slot theo yêu cầu.

<script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

Trong thành phần gốc:

<script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

Làm việc với các slot được đặt tên

Bạn có thể dùng các slot được đặt tên khi muốn chuyển nhiều slot trong thành phần. Việc đặt tên giúp quản lý dễ dàng các slot hơn vì bạn có thể đặt tên độc đáo cho từng slot. Với slot đã được đặt tên, bạn có thể xây dựng các thành phần phức tạp với bố cục khác nhau.

Để tạo slot đã đặt tên, chuyển thuộc tính name sang thành phần slot:

<div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

Ở ví dụ này, bạn có hai slot được đặt tên, slot header và footer. Dùng thuộc tính slot này, bạn có thể chuyển nội dung vào từng slot từ thành phần gốc.

Ví dụ:

<script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

Code này cho thấy cách dùng thuộc tính slot để chuyển nội dung tới slot được đặt tên. Ở tag span đầu tiên, bạn chuyển thuộc tính slot với giá trị header. Điều này đảm bảo text trong tag span sẽ hiện ở slot header. Tương tự, text trong tag span với giá trị của thuộc tính slot footer sẽ hiện ở slot footer.

Chuyển tiếp slot là gì?

Chuyển tiếp slot là tính năng trong Svelte cho phép bạn chuyển nội dung từ một thành phần gốc qua một trình đóng gói vào thành phần con. Điều này rất hữu ích trong những trường hợp mà bạn muốn chuyển nội dung từ các thành phần không liên quan.

Đây là ví dụ về cách dùng chuyển tiếp slot, đầu tiên, tạo thành phần con:

<main>
  This is the child component
  <slot name="message"></slot>
</main>

Tiếp theo, tạo thành phần bao quanh:

<script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

Trong khối code này, bạn đang chuyển slot có tên khác vào slot message của thành phần con.

Sau đó, trong thành phần cha, viết code:

<script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

Ở cấu trúc trên, nội dung "This is from the parent component" được chuyển qua thành phần wrapper và trực tiếp đưa vào thành phần con nhờ slot wrapperMessage trong thành phần bao quanh.

Nhìn chung, slot là tính năng mạnh mẽ trong Svelte, cho phép bạn tạo các thành phần tùy biến và có thể tái sử dụng cao. Hi vọng bài viết giúp bạn biết cách dùng slot trong Svelte.