Slotte Slots

Cách làm việc với các khe trong Svelte để xác định các thành phần có thể được cấu tạo cùng nhau

Khe cắm là một cách tiện dụng để cho phép bạn xác định các thành phần có thể được cấu tạo cùng nhau.

Và ngược lại, tùy thuộc vào quan điểm của bạn, vị trí là một cách tiện dụng để định cấu hình thành phần bạn đang nhập.

Đây là cách chúng hoạt động.

Trong một thành phần, bạn có thể xác định một vị trí bằng cách sử dụng<slot />(hoặc là<slot></slot>) cú pháp.

Đây là mộtButton.sveltethành phần chỉ in ra một<button>Thẻ HTML:

<button><slot /></button>

Đối với các nhà phát triển React, điều này về cơ bản giống như<button>{props.children}</button>

Bất kỳ thành phần nào nhập nó đều có thể xác định nội dung sẽ được đưa vào vị trí bằng cách thêm nó vào thẻ mở và thẻ đóng của thành phần:

<script>
import Button from './Button.svelte'
</script>

<Button>Insert this into the slot</Button>

Bạn có thể xác định một mặc định, được sử dụng nếu vị trí không được lấp đầy:

<button>
  <slot>
    Default text for the button
  </slot>
</button>

Bạn có thể có nhiều vị trí trong một thành phần và bạn có thể phân biệt vị trí này với vị trí khác bằng cách sử dụng các vị trí được đặt tên. Vị trí không có tên duy nhất sẽ là vị trí mặc định:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

Đây là cách bạn sẽ sử dụng nó:

<script>
import Button from './Button.svelte'
</script>

<Button> Insert this into the slot <p slot=“before”>Add this before</p> <p slot=“after”>Add this after</p> </Button>

Và điều này sẽ hiển thị như sau cho DOM:

<p slot="before">Add this before</p>
<button>
  Insert this into the slot
</button>
<p slot="after">Add this after</p>

Tải xuống miễn phí của tôiSổ tay Svelte


Các hướng dẫn nhỏ gọn hơn: